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

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