jQuery手風琴插件（如Facebook或Google）

我在網上看到了很多手風琴腳本，但沒有找到符合我需求的任何東西。我想爲手風琴製作一個插件，就像Facebook使用的插件一樣。它應該像這樣工作：jQuery手風琴插件（如Facebook或Google）

單擊以打開和關閉。
打開時添加樣式類。
關閉外部點擊。 當點擊事件在手風琴盒內時，它不應該關閉。

有什麼辦法可以做到這一點？如果你知道，請幫忙。我是新來的jQuery ...

在此先感謝。

2012-05-02 Gaurav Mehra

嘗試谷歌的'jQuery'和'手風琴'，這應該返回數百個例子，讓你開始。 –

當15行代碼能夠解決它時，無需使用插件：它改變了在特定DOM元素和窗口上使用setTimeout觸發的點擊事件的順序。

var ShowingAccordion = false; 

$(document).ready(function() { 

     $('.MyAccordionOpener').click(function() { 

      if ($(this).next('.MyAccordion').is(':visible') === false) { 

       ShowingAccordion = false; 
       $('.MyAccordion').hide(500); 
       $(this).next('.MyAccordion').addClass('SomeClass'); 
       $(this).next('.MyAccordion').show(500); 
       setTimeout(function() { ShowingAccordion = true; }, 1); 
      } 
     }); 

     $('.MyAccordion').click(function() { 

      ShowingAccordion = false; 
      //this is the line that solves your problem 
      setTimeout(function() { ShowingAccordion = true; }, 1); 
     }); 


     $(document).click(function() { 

      if (ShowingAccordion === true) {  

       $('.MyAccordion').hide(500); 
       ShowingAccordion = false; 
      }  
     }); 
});

而這裏的demo

如果是你所需要的，那麼你可以接受的答案，編碼快樂！

來源

2012-05-03 02:28:35 frenchie

其實，我的網站上有很多下拉菜單，我認爲爲每個下拉菜單編寫一個單獨的腳本並不是個好主意，所以我需要製作一個插件。我剛剛看到這個twitter引導腳本，但它不是我想要的方式工作，它有點難以根據需要進行編輯.. –

那麼你可以通過與類一起工作來適應它！一個插件就是一樣的代碼。要麼你會複製粘貼你不會理解的代碼，並且很難根據你的特定需求（即你目前的情況）進行修改，或者你自己創建。我做了改變，讓它與班級合作。請參閱編輯和示例jfiddle。 – frenchie

請注意，如果您想要一路使用jquery來替換setTimeout行，那麼您正在尋找的jquery函數是.proxy（）。但試着瞭解15行代碼的作用，你會好起來的。 – frenchie

jQuery手風琴插件（如Facebook或Google）

回答

相關問題