0

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

//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')
    });

 });
4

5 回答 5

2

试试这个：

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

小提琴

于 2013-09-19T05:28:08.043 回答
0

采用

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

演示

于 2013-09-19T05:31:14.803 回答
0

您可以为此使用下一个功能，最好将两个点击事件结合起来以获得更好的性能

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


});

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

于 2013-09-19T05:32:15.543 回答
0

或者像这样，可能不太容易受到变化的影响

$(function(){
   $('.category > h3').click(function(){
     $(this).find('.category > ul').slideToggle("fast");
  });
于 2013-09-19T05:32:23.447 回答
0

采用

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

代替

$('.category > ul').slideToggle("fast");
于 2013-09-19T05:41:57.453 回答