我有 3 个具有相同结构的扩展 div。就像是:
<div class="expand">
<h3 class="more">Click to expand</h3>
<div class="wrapper">Iasdfgh qwerty zxcvbn</div>
</div>
jQuery
$(document).ready(function(){
var toggleButton = $('.expand h3.more');
var expandWrap = $(toggleButton).next('.wrapper');
$(toggleButton).click(function(){
if ($(expandWrap).is('.closed')) {
$(toggleButton).removeClass('closed');
$(expandWrap)
.removeClass('closed')
.slideDown('slow');
} else {
$(expandWrap)
$(expandWrap).slideUp('slow', function(){
$(this).addClass('closed');
$(toggleButton).addClass('closed');
});
}
});
});
现在,当我单击“单击以展开”h3
时,所有.wrapper
幻灯片都会上下滑动。我怎样才能只定位下一个立即数.wrapper
,以便一次只能切换一个?