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目前无效，您需要在<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>

<强> Fiddle Demo

Answer 2

使用gt：

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

Fiddle DEMO

Answer 3

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

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

请参阅此Example

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

3 个答案: