如何使用JavaScript在ul标签内隐藏div标签

Question

我正在尝试在ul标签中隐藏div标签。 如果我使用ul标签的ID，则所有标签都会被隐藏。 但我要求先显示div标签，然后隐藏其余的div标签。

html代码如下：

<ul class="list inputControls ui-sortable" id="inputControlsContainer">
<div id="Radio" class="leaf">...</div>
<div id="Date" class="leaf">...</div>
<div id="Account" class="leaf">...</div>
<div id="Date1" class="leaf">...</div>
</ul>

脚本代码：

<script>
jQuery(document).ready(function () {
var child=document.getElementById("inputControlsContainer").style.display='none';
});
</script>

Answer 1

您可以将.not（）与：first选择器一起使用：

$('#inputControlsContainer').find('.leaf').not(':first').hide();

---

另外，您的HTML当前无效，您需要在<ul>内使用<li>代替<div> <ul> ：

<ul class="list inputControls ui-sortable" id="inputControlsContainer">
    <li id="Radio" class="leaf">...</li>
    <li id="Date" class="leaf">...</li>
    <li id="Account" class="leaf">...</li>
    <li id="Date1" class="leaf">...</li>
</ul>

小提琴演示

Answer 2

使用gt ：

$('#inputControlsContainer .leaf:gt(0)').hide();

小提琴演示

Answer 3

使用Jquery通过类选择器选择li元素，然后将事件处理程序绑定到click函数。 绑定函数应找到与所选元素相关的下一个ul，然后在其上调用toggle方法。 默认情况下，jquery切换方法将切换元素的可见性。

$(".current").click(function(){
  $(this).next("ul").toggle();
});

看这个例子