用JQuery切换手风琴

我有一个给我的手风琴，它不会切换每个标签的打开和关闭。它只关闭选项卡另一个标题被选中，但我希望用户能够点击关闭它。我不知道如何编辑这个jquery以允许这发生。用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声明......但我不知道为什么。

我也不确定为什么它默认第一个标签为open ...有没有办法修改它？

http://jsfiddle.net/FKAAM/

任何意见是非常感谢。非常感谢。

来源

2013-01-07 RCNeil

之前，你失去了你的手指写 “jQuery的” 所有的地方：'（function（$）{/ * remap $ to jQuery *// * *代码如下$ * /}）（jQuery）;' –

use'.slideToggle（）;' – ashley

I d idn't代码，所以是的，通常我不会每次都手动写出JQuery。另外，@ashley，你的解决方案实际上是正确的，所以感谢评论。 – RCNeil

使用的slideToggle（）代替：

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

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

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

来源

2013-01-07 18:45:10 Lowkase

我喜欢这个解决方案，除了第一次点击后幻灯片效果停止工作。如果你使用'.slideToggle（）'，它可以工作。 http://jsfiddle.net/FKAAM/3/请修改答案。 – RCNeil

对不起，它应该是slideToggle（）而不是toggle（）：http://jsfiddle.net/FKAAM/4/ – Lowkase

请编辑您的答案，以便我可以将其标记为正确。 – RCNeil

地址：

collapsible: true

到你的手风琴选项，那么用户就可以点击将其关闭。

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

来源

2013-01-07 18:44:19

究竟在哪里？ ..... –

我以为你使用的是jQuery UI手风琴：http://jqueryui.com/accordion/ 你可能想看看它，因为它已经完成了所有的工作。 –

-2

我会建议你使用jQuery手风琴

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

检查example here。我想这是你需要的。

来源

2013-01-07 18:44:49 Wolf

这里的acordion link和全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-21 15:43:40 CommanderDoge

用JQuery切换手风琴

回答

相关问题