我一直在寻找一种方法来包含“全部展开”和“全部崩溃”。我使用简单的jquery手风琴用新代码更新了演示。
原始代码应归功于Ryan Stemkoski http://www.stemkoski.com/stupid-simple-jquery-accordion-menu/
$(document).ready(function() {
$('.question').click(function() {
if($(this).next().is(':hidden') != true) {
$(this).removeClass('active');
$(this).next().slideUp("normal");
} else {
$('.question').removeClass('active');
$('.answer').slideUp('normal');
if($(this).next().is(':hidden') == true) {
$(this).addClass('active');
$(this).next().slideDown('normal');
}
}
});
$('.answer').hide();
$('.expand').click(function(event)
{$('.question').next().slideDown('normal');
{$('.question').addClass('active');}
}
);
$('.collapse').click(function(event)
{$('.question').next().slideUp('normal');
{$('.question').removeClass('active');}
}
);
});
答案 0 :(得分:5)
这可以更容易解决。
只需在要扩展/折叠的accordion元素('.ui-widget-content')上使用jQuery hide / show命令。
示例:
$(document).ready(function() {
$('.expand').click(function() {
$('.ui-widget-content').show();
});
$('.collapse').click(function() {
$('.ui-widget-content').hide();
});
});
答案 1 :(得分:3)
我会在展开和折叠链接中添加一个类或ID,然后这样的内容将起作用
$(document).ready(function() {
$("#expand").click(function(){
('.answer').slideDown('normal');
});
$("#collapse").click(function(){
('.answer').slideUp('normal');
});
}