javascript - jQuery accordion plugin (like Facebook or Google)

Question

I have seen many scripts for accordion on the internet, but haven't found anything which meets my needs. I want to make a plugin for accordion just like that which Facebook uses. It should work like this:

1. Click to open and close.
2. Add style class while open.
3. Close upon an outside click. It should not close when click event is inside the accordion box.

Is there any way to achieve this? Please help if you know. I am new to jQuery...

Thanks in advance.

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;
           }    
       });
});

这是演示

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