只用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

裏面的點擊功能你有這樣的：

$('.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

你需要做的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()