Question

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

我的问题是这个 - 我有一个班级也用它来切换，称为'开放'。这使我能够使用不同的图标来表示打开和关闭。但是我需要在切换类上延迟，因此在菜单栏关闭之前图标不会改变。

$(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 and setTimeout

注意：我最终在下面的答案中更改了我的代码。它现在正在完美运作。

Answer 1

使用菜单的回调来完成

时切换图标

      $reference = $(this)

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

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

solution

切换类上的jQuery setTimeout

1 个答案: