Question

我在互联网上看过很多手风琴脚本，但没有找到满足我需求的东西。我想为手风琴制作插件，就像Facebook使用的一样。它应该像这样工作：

点击打开并关闭。
打开时添加样式类。
关闭外部点击。 当点击事件在手风琴盒内时，它不应该关闭。

有没有办法实现这个目标？如果你知道，请帮忙。我是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

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

jQuery手风琴插件（如Facebook或谷歌）

1 个答案: