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

这对你有用。当点击<a href="index2.html#div2"> 时，它会隐藏整个ul。否则只隐藏特定的li。

"something"

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

Answer 3

你是正确的div里面的列表是验证错误（Can I use div as a direct child of UL? + Is this HTML structure valid? 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之外，它完全有效并且应该归功于他。

jQuery - 如何slideToogle ul / li list

3 个答案: