Question

如何根据<li>进行一次<ul>切换。这段代码发生的是所有<ul>标签都被渲染。它还会呈现所有<li>标记。我想要一个<li>在点击相应的<ul>时进行切换。

代码：

<script>

   $(document).ready(function(){
      $("ul").click(function(){
         $("li").toggle();
      });
   });

</script>


<body>
   <ul>Toggle between hide() and show()</ul>
   <li>This is a paragraph.</li>
   <ul>Toggle between hide() and show()</ul>
   <li>This is a paragraph.</li>
<body/>

Answer 1

将当前事件来源添加为context，同时将li放入ul。

<强> Live Demo

HTML 的

<ul>Toggle between hide() and show()
    <li>This is a paragraph.</li>
</ul>
<ul>Toggle between hide() and show()
    <li>This is a paragraph.</li>
</ul>

的Javascript

$(document).ready(function(){
      $("ul").click(function(){
           $("li", this).toggle();
      });
});

编辑要在点击ul但不是li

时切换

<强> Live Demo

$(document).ready(function () {
    $("ul").click(function (evt) {      
        if(evt.target.tagName != 'UL') 
            return;
        $("li", this).toggle();
    });
});

Answer 2

$("ul").click(function(){
      $(this).find("li").toggle();
});

并在li内移动ul：

<ul>
    <li>This is a paragraph.</li>
</ul>

实际上你应该完全重构你的HTML，因为它没有任何意义（并且它是无效的）。但JavaScript代码（在其他内容中触发某些内容）就像上面那样。

Answer 3

如果您只有一个li，则不需要ul。 jQuery 1.8中不推荐使用.toggle()函数。

试试这个：

$(".trigger").click(function(){
   var obj = $(this).next();
   if($(obj).hasClass("hidden")){
      $(obj).removeClass("hidden").slideDown();
   } else {
      $(obj).addClass("hidden").slideUp();
   }
});

HTML：

<div class="trigger">Toogle</div>
<div class="elem hidden">Content</div>
<div class="trigger">Toogle</div>
<div class="elem hidden">Content</div>

CSS：

.elem { display:none; }

在此处查看演示： DEMO

如何使用<ul> </ul> </li>进行每个<li>切换

3 个答案: