2

我有一个仅在遇到特定媒体查询时出现的按钮。现在它工作正常，按钮出现，单击按钮将显示sidenav。再次单击将关闭菜单。

我的问题是——我也有一个可以切换的类，叫做“open”。这使我能够使用不同的图标来表示打开和关闭。但我需要延迟切换类，以便在菜单栏关闭之前图标不会改变。

$(document).ready(function() {
        /* prepend category button */
        $('.side-bar').before('<div id="button"><p class="sidebar-button"> Menu </p></div>'); //insert html for menu button

            $(".sidebar-button").click(function() { //click menu button and do..

                setTimeout(function(){ //i added this..

              $(".side-bar").slideToggle(); //toggle sidebar
              $(this).toggleClass("open"); // toggle class on button for 'open'
            });
        },5000); // other part of the seTimeout
    });

实现这一目标的最佳方法是什么？用于此问题的实时示例：http: //jsfiddle.net/rXt39/2/

编辑

这可能有助于寻找类似事物的人。我在这里找到了解决方案：

jQuery 和 setTimeout

注意：我最终在下面的答案中更改了我的代码。它现在运行良好。

4

1 回答 1

3

完成后使用菜单回调来切换图标

      $reference = $(this)

      $(".side-bar").slideToggle(function(){
            $reference.toggleClass("open");           
      });

我在 CSS 中添加了一个 .open 类，以便在展开时将单词菜单变为黄色。

解决方案

于 2012-08-17T13:45:47.253 回答