單擊關閉JQuery水平手風琴

Question

示例： http ： //vincent-massaro.com/map/

當前，該腳本允許您單擊手風琴的一部分以將其打開，但是設置為在mouseleave上關閉。 當我將mouseleave設置為.click時，它會感到困惑，並且不知道它處於什么狀態。我想要創建它，以便您可以單擊以將其打開，然后單擊以關閉它，而不是mouseleave。 控制它的代碼在下面，完整的腳本在頁面源代碼中鏈接的haccordion.js中。 如果有人可以幫助我修改此腳本，我將不勝感激！ 提前致謝。

$target.click(function(){
            haccordion.expandli(config.accordionid, this)
                    config.$lastexpanded=$(this)
  })
            if (config.collapsecurrent){ //if previous content should be contracted when expanding current
                    $target.mouseleave(function(){
                          $(this).stop().animate({width:config.paneldimensions.peekw}, config.speed)
  })
  }

Answer 1

您可以設置一個布爾變量來表示手風琴是否打開，然后單擊即可檢查。 （您也需要在點擊時切換變量的狀態）

編輯：

好的，嘗試一下。 像這樣設置一個布爾全局變量（在click事件之外）：

var accordion_expanded = false;

然后在您的click事件中執行以下操作：（我尚未對此進行測試，因此您可能需要對其進行一些調整以適合您的情況）

在擴展手風琴的功能中輸入以下內容：

accordion_expanded = true;

在簽約手風琴的功能中，

if(accordion_expanded == true){
   //Contract accordion code goes here

   accordion_expanded == false;
}

祝好運！

Answer 2

試試這個

$('.accordion-item-header').click(function() {
    var item = $(this).parent().find('.accordion-item-body');
    item.toggleClass('open').animate({
        width:item.hasClass('open') ? 0: 100 
    }, 100).toggleClass('open');
});