jQuery-如何滑动ul / li列表

Question

得到此代码：

<ul>something
  <li>one</li>
  <li>two</li>
  <li>three</li>
</ul>

我要实现的是，当我单击UL文本元素（某物）时，整个UL处于切换状态。 当我单击LI元素时-仅切换此特定的LI元素。 我想我需要将代码修改为：

<ul class="whole">something
  <li>
    <ul>one
      <li class="li one">one</li>
    </ul>
    <ul>two
      <li class="li two">two</li>
    </ul>
    <ul>three
      <li class="li three">three</li>
    </ul>
  </li>
</ul>

因此，我可以碰上某些东西（文本）以切换LI（一，二，三）。 但是，如何协调点击时切换整个UL与切换LI？

到目前为止的jQuery代码：

    $(".whole").click(function()
    {
      $(".li").slideToggle();
    });

其余的jQ代码应该是什么样的？

Answer 1

您要定位整个无序列表，并首先使用css将其隐藏，使用另一个元素像导航链接一样触发它：

 $(".toggle-ul").click(function() { $(".whole").slideToggle(); }); $(".whole .toggle-sub-ul").click(function() { $(this).parent().find('ul').slideToggle(); }); 

 .whole { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="toggle-ul">Click me</div> <ul class="whole"> <li> <div class="toggle-sub-ul">Click me</div> <ul> <li class="li one">one</li> </ul> </li> <li> <div class="toggle-sub-ul">Click me</div> <ul> <li class="li two">two</li> </ul> </li> <li> <div class="toggle-sub-ul">Click me</div> <ul> <li class="li three">three</li> </ul> </li> </ul> 

编辑：

您必须在子组内添加其他元素才能触发这些切换。 代码已更新

Answer 2

当您点击"something" ，它将隐藏整个ul。 否则，仅隐藏特定的li。

  $("#toggleul,.whole").click(function() { $("ul").slideToggle(); }); $('li').click(function(e){ $(this).slideToggle(); e.stopPropagation(); }) $('#toggleli').click(function(){ $('li').show(); }) 

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="whole">something <li> one </li> <li> two </li> <li> three </li> <li> four </li> </ul> <div id="toggleul">toggle ul</div> <div id="toggleli">show toggled li</div> 

Answer 3

您是正确的div内部列表，它在验证时出错（ 我可以将div用作UL的直接子级吗？ + 此HTML结构是否有效？UL> DIV> {LI，LI}，DIV> {LI，LI}，DIV> {LI，LI} ），因此只需向UL元素添加一个类。

 $(".toggle-ul").click(function() { $(".whole").slideToggle(); }); $(".whole .toggle-sub-ul").click(function() { $(this).parent().find('li').slideToggle(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="toggle-ul">Click me</div> <ul class="whole"> <li> <ul class="toggle-sub-ul">Click me <li class="li one">one</li> </ul> </li> <li> <ul class="toggle-sub-ul">Click me <li class="li two">two</li> </ul> </li> <li> <ul class="toggle-sub-ul">Click me <li class="li three">three</li> </ul> </li> </ul> 

这应该完全按照您想要的方式工作。 顺便说一句，我在这里修改了@Sergio Alen代码，在这个div旁边，它是完全有效的，应归功于他。