使用 JQuery 切换手风琴
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14202010/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Toggle an Accordion with JQuery
提问by RCNeil
I had an accordion given to me that is not toggling each tab open and close. It only closes the tab when anothertitle is selected, but I'd like the ability for the user to close it on click as well. I'm not sure how to edit this Jquery to allow this to happen.
我得到了一个手风琴，它不会切换每个标签的打开和关闭。它仅在选择另一个标题时关闭选项卡，但我希望用户也能够在单击时关闭它。我不确定如何编辑此 Jquery 以允许发生这种情况。
jQuery("ul.gdl-accordion li").each(function(){
jQuery(this).children(".accordion-content").css('height', function(){
return jQuery(this).height();
});
if(jQuery(this).index() > 0){
jQuery(this).children(".accordion-content").css('display','none');
}else{
jQuery(this).find(".accordion-head-image").addClass('active');
}
jQuery(this).children(".accordion-head").bind("click", function(){
jQuery(this).children().addClass(function(){
if(jQuery(this).hasClass("active")) return "";
return "active";
});
jQuery(this).siblings(".accordion-content").slideDown();
jQuery(this).parent().siblings("li").children(".accordion-content").slideUp(); jQuery(this).parent().siblings("li").find(".active").removeClass("active");
});
});
I'm assuming it's somewhere in the .clickfunction, in that ifstatement... but I'm not sure why.
我假设它在.click函数的某个地方，在那个if语句中......但我不确定为什么。
I'm also not sure why it is defaulting the first tab as open... is there a way to modify that as well?
我也不确定为什么它默认第一个选项卡是打开的......有没有办法修改它？
Any advice is greatly appreciated. Many thanks SO.
任何意见是极大的赞赏。非常感谢。
回答by Lowkase
Use slideToggle() instead:
使用 slideToggle() 代替：
jQuery(this).siblings(".accordion-content").slideDown();
jQuery(this).siblings(".accordion-content").slideToggle();
回答by Pawe? Witek
here's the acordion linkand full jQuery code:
这是手风琴链接和完整的 jQuery 代码：
jQuery(document).ready(function($){
//you can now use $ as your jQuery object.
$(".panel-heading").click(function() {
$(this).parent().toggleClass('active').find('.panel-body').slideToggle('fast');
$(".panel-heading").not(this).parent().removeClass('active').find('.panel-body').slideUp('fast');
});
});
回答by Francis Lewis
Add:
添加：
collapsible: true
to your accordion options, then users will be able to click to close it.
到您的手风琴选项，然后用户将能够单击以关闭它。
(jQuery UI Accordion: http://jqueryui.com/accordion/)
（jQuery UI 手风琴：http: //jqueryui.com/accordion/）
回答by Wolf
I will suggest you to use jQuery accordion
我会建议你使用 jQuery 手风琴
$(function() {
$( "#accordion" ).accordion({
collapsible: true
});
});
Check the example here. I guess this is what you needed.
