1

我有一个手风琴给我，它不会切换每个标签的打开和关闭。它仅在选择另一个标题时关闭选项卡，但我希望用户也能够在单击时关闭它。我不确定如何编辑此 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");
    });
});

我假设它在.click函数中的某个地方，在那if句话中......但我不确定为什么。

我也不确定为什么将第一个选项卡默认为打开...有没有办法修改它？

http://jsfiddle.net/FKAAM/

任何意见是极大的赞赏。非常感谢。

4

4 回答 4

4

使用 slideToggle() 代替：

jQuery(this).siblings(".accordion-content").slideDown();

jQuery(this).siblings(".accordion-content").slideToggle();

http://jsfiddle.net/FKAAM/4/

于 2013-01-07T18:45:10.393 回答
2

这是手风琴链接和完整的 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');
  });
});
于 2017-05-21T15:43:40.413 回答
1

添加：

collapsible: true

到您的手风琴选项，然后用户将能够单击以关闭它。

（jQuery UI 手风琴：http: //jqueryui.com/accordion/）

于 2013-01-07T18:44:19.147 回答
-2

我会建议你使用 jQuery 手风琴

$(function() {
        $( "#accordion" ).accordion({
            collapsible: true
        });
    });

在此处查看示例。我想这就是你需要的。

于 2013-01-07T18:44:49.060 回答