Целевой следующий div только с jQuery

Question

Я пытаюсь создать эффект аккордеона, используя jQuery.Мне удалось заставить его работать, только когда мой 'h5' нажал на все 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 внутри .accordion div, поэтому каждый из них переключается. Измените селектор на this, чтобы он влиял только на элемент, на который нажали.

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

Answer 2

Вам просто нужно изменить селектор для SlideToggle

вместо $('.accordion h5').next().slideToggle()

, вам нужно указать $(this).next().slideToggle()

Answer 3

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

Answer 4

Просто напишите $(this).next() вместо $('.accordion h5').next(), что соответствует всем .accordion h5 в коде

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

Answer 5

Вам нужно использовать this:

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

this внутри функции обратного вызова события click всегда щелкаются ссылки на элемент. Таким образом, вы выбираете элемент, по которому щелкнули, а затем следующий элемент с $(this).next().

Вот рабочая демонстрация: http://jsfiddle.net/GnAhs/2/