Question

我有一些li行的子组，包含在一些ul列表中。页面打开时，将显示所有行。我希望它能隐藏li，直到点击包含它们的ul。

我知道你可以使用css“display：none”将它们隐藏在打开的页面上，但是作为javascript的初学者我不知道如何在点击它时让列表扩展。

由于

Answer 1

我使用gt选择器切换以隐藏超出特定数字的元素。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 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();
   }
});

代码段，

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 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>

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

3 个答案: