Question

我有一个具有相同结构的HTML元素，但我希望我的jquery只影响我单击的特定元素，而不是影响DOM中的所有元素。这是我的fiddle。

//HTML Code
<div class="category">
<h3>This is the title</h3>
<ul>
    <li>Sub menu one</li>
    <li>Sub menu two</li>
    <li>Sub menu three</li>
    <li>Sub menu four</li>
    <li>Sub menu five</li>
    <li>Sub menu six</li>
    <li>Sub menu seven</li>
</ul>
</div>
<div class="category">
    <h3>This is the title</h3>
<ul>
    <li>Sub menu one</li>
    <li>Sub menu two</li>
    <li>Sub menu three</li>
    <li>Sub menu four</li>
    <li>Sub menu five</li>
    <li>Sub menu six</li>
    <li>Sub menu seven</li>
</ul>
</div>

//jquery

$(function(){
   $('.category > h3').click(function(){
     $('.category > ul').slideToggle("fast");
      });


$('.category > h3').click(function(event){
    $(this).toggleClass('clicked')
    });

 });

Answer 1

试试这个：

  $(function(){
   $('.category > h3').click(function(){
     $(this).next().slideToggle("fast");
  });

Fiddle

Answer 2

使用

   $('.category > h3').click(function(){
     $(this).next("ul").slideToggle("fast");
  });

DEMO

Answer 3

你可以使用下一个功能，最好结合两个点击事件以获得更好的性能

$(function(){
 $('.category > h3').click(function(){
   $(this).next("ul").slideToggle("fast");
   $(this).toggleClass('clicked')
 });


});

http://jsfiddle.net/tnsWj/8/

Answer 4

或者像这样，可能不太容易受到改变

$(function(){
   $('.category > h3').click(function(){
     $(this).find('.category > ul').slideToggle("fast");
  });

Answer 5

使用

$(this).next('ul').slideToggle("fast");

而不是

$('.category > ul').slideToggle("fast");

单击元素而不影响具有相同结构的其他元素

5 个答案: