如何隐藏 <li> 列表，直到单击包含它的 <ul>答案

【问题标题】：how to have a <li> list hidden until the <ul> containing it is clicked如何隐藏 <li> 列表，直到单击包含它的 <ul>
【发布时间】：2017-05-03 05:47:20
【问题描述】：

我有 li 行的子组，包含在一些 ul 列表中。当页面打开时，所有行都会显示。我希望在单击包含它们的 ul 之前隐藏 li。

我知道您可以使用 css "display:none" 将它们隐藏在打开的页面上，但作为 javascript 的初学者，我不确定如何在单击列表时使其展开。

谢谢

【问题讨论】：

请提供邮政编码

标签： javascript jquery html html-lists

【解决方案1】：

我会使用切换和gt 选择器来隐藏超过一定数量的元素。

lis = $("li:gt(0)").hide();
$("ul").click(function () {
  lis.toggle();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>Expand</li>
  <li>A</li>
  <li>B</li>
  <li>C</li>
  <li>D</li>
</ul>

【讨论】：

【解决方案2】：

你可以试试，

$('ul.subgroups').on('click',function(){ // will work only if you have at least a single li which is visible
   if ($(this).children('li:hidden').length) {
      $(this).children('li:hidden').show();
   }
});

片段，

$(function() {
  $('ul.subgroups').on('click', function() {
    if ($(this).children('li:hidden').length) {
      $(this).children('li:hidden').show();
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>Item 1</li>
  <li>Item 2
    <ul class="subgroups">
      <li> Sub Item 2-1</li>
      <li style="display:none"> Sub Item 2-2</li>
    </ul>
  </li>
  <li>Item 3
    <ul class="subgroups">
      <li> Sub Item 3-1</li>
      <li style="display:none"> Sub Item 3-2</li>
    </ul>
  </li>
</ul>

【讨论】：

【解决方案3】：

您可以为此使用 jQuery toggle

$('li a').click(function(){
    $(this).siblings('ul').toggle();
})

ul {
  padding: 0px;
  list-style: none;
}
li {
  display: block
}
li ul {
  display: none;
  padding-left: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li><a href="#" title="">first</a>
    <ul>
      <li><a href="#" title="">first</a></li>
      <li><a href="#" title="">second</a></li>
      <li><a href="#" title="">third</a></li>
      <li><a href="#" title="">fourth</a></li>
      <li><a href="#" title="">fifth</a></li>
    </ul>
  </li>
  <li><a href="#" title="">second</a></li>
  <li><a href="#" title="">third</a>
    <ul>
      <li><a href="#" title="">first</a></li>
      <li><a href="#" title="">second</a></li>
      <li><a href="#" title="">third</a></li>
      <li><a href="#" title="">fourth</a></li>
      <li><a href="#" title="">fifth</a></li>
    </ul>
  </li>
  <li><a href="#" title="">fourth</a></li>
  <li><a href="#" title="">fifth</a></li>
</ul>

【讨论】：

感谢您完美地完成了这项工作。我尝试将用于也可以工作的子组行。