如何使用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();
});

看這個例子