用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切換手風琴

回答

相關問題