Question

我正在尝试使用jQuery制作'手风琴'效果。我已经设法让它工作只有当我的'h5'点击所有div打开时，它应该只是下一个div。

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

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

Answer 1

在点击功能中你有这个：

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

$( '.accordion h5' )匹配h5 div中的每个.accordion，因此每个人都会被切换。将选择器更改为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始终链接到已单击的元素。因此，您选择单击的元素，然后选择$(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()

仅使用jQuery定位下一个div

5 个答案: