1

<li>ごとにトグルを 1つだけ作成するにはどうすればよいですか<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

現在のイベント ソースをcontextとして追加し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

1 つしか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; }

ここでデモを参照してください: DEMO

于 2013-03-01T18:17:08.630 に答える