仅使用jQuery定位下一个div

Question

我正在尝试使用jQuery产生“手风琴”效果。 我设法让它仅在单击我的“ h5”时才起作用，所有div都应打开，而仅应将其作为下一个div。

$('.accordion h5').click(function() {
      $('.accordion h5').next().slideToggle('slow', function() {
        // Animation complete.
      });
});

我做了一个小提琴，所以您可以明白我的意思： http : //jsfiddle.net/GnAhs/1/

Answer 1

在click函数中，您具有以下功能：

$('.accordion h5').next().slideToggle('slow', function() { ...

$( '.accordion h5' )与.accordion div中的每个h5匹配，因此它们中的每个都被切换。 将选择器更改this ，以使其仅影响单击的元素。

$('.accordion h5').click(function() {
      $( this ).next().slideToggle('slow', function() {
        // Animation complete.
      });
});

Answer 2

您需要利用this ：

$('.accordion h5').click(function() {
    $(this).next().slideToggle('slow', function() {
        // Animation complete.
    });
});

this在回调函数里面click事件总是链接到元素已被点击。 因此，您选择了clicked元素，然后选择了带有$(this).next()的下一个元素。

这是一个工作示例： http : //jsfiddle.net/GnAhs/2/

Answer 3

只需编写$(this).next()而不是$('.accordion h5').next() ，它与代码中的所有.accordion h5匹配

$('.accordion h5').click(function() {
        /*change this->*/$(this).next().slideToggle('slow', function() {
        // Animation complete.
    });
});

Answer 4

$('.accordion h5').click(function(){
    $(this).next("div").slideToggle('slow', function() {
        // Animation complete.
      });
});

Answer 5

您只需要更改SlideToggle的选择器

而不是$('.accordion h5').next().slideToggle()

您需要指定$(this).next().slideToggle()