1

我怎样才能<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/>
4

3 回答 3

8

将当前事件源添加为上下文，也li放入ul。

现场演示

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 时打开

现场演示

$(document).ready(function () {
    $("ul").click(function (evt) {      
        if(evt.target.tagName != 'UL') 
            return;
        $("li", this).toggle();
    });
});
于 2013-03-01T17:43:06.973 回答
1 
$("ul").click(function(){
      $(this).find("li").toggle();
});

并li在里面移动ul：

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

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

于 2013-03-01T17:42:47.827 回答
0

如果只有一个li，则不需要ul. 该.toggle()函数在 jQuery 1.8 中已弃用。

试试这个：

$(".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; }

在此处查看演示：演示

于 2013-03-01T18:17:08.630 回答