javascript - jQuery Accordion 插件(如 Facebook 或 Google)

Question

我在网上看到了很多 Accordion 的脚本，但是没有找到满足我需要的脚本。我想为 Accordion 制作一个插件，就像 Facebook 使用的那样。它应该像这样工作:

1. 点击打开和关闭。
2. 打开时添加样式类。
3. 在外部点击时关闭。 当点击事件在 Accordion 框内时，它不应关闭。

有什么办法可以实现吗？知道的请帮忙看看。我是 jQuery 新手...

提前致谢。

Answer 1

当 15 行代码将解决它时，不需要插件:它是关于使用 setTimeout 更改在特定 DOM 元素和窗口上触发的点击事件的顺序。

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

如果它满足您的需求，那么您可以接受答案并愉快地编码!