切换类上的 jQuery setTimeout

Question

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

我的问题是这样的 - 我有一个类也可以与之切换，称为“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 and setTimeout

注意:我最终根据下面的答案更改了我的代码。现在可以完美运行了。

Answer 1

使用菜单回调以在完成时切换图标

      $reference = $(this)

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

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

solution