切换类jQuery setTimeout

我有一个按钮，只有当它击中某个媒体查询时才会出现。现在它工作正常，按钮出现，单击按钮将显示sidenav。再次点击关闭菜单。切换类jQuery setTimeout

我的问题是这样的 - 我有一个类与它切换，并称为'打开'。这使我可以使用不同的图标来表示打开和关闭。但是我需要延迟切换类，所以图标不会改变，直到菜单栏关闭。

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

注：我最终改变下面的回答我的代码。它现在工作完美。

来源

2012-08-17 Doidgey

使用的setTimeout只有当切换动画设置为一样的超时将工作，如果一个人有更多或更少项的菜单，然后它将无法工作。这就是为什么你可以设置一个回调在第一个函数完成的时刻执行 – 2012-08-17 14:04:26

使用回调的菜单toggleClass图标时，其完成

 $reference = $(this) 

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

我在CSS中增加了一个。开类打开Word菜单黄色而扩大。

solution

来源

2012-08-17 13:45:47

当我查看源代码中的类切换时，这没有奏效。班级没有被应用？如果我理解正确，我的解决方案是有缺陷的，因为如果我的菜单有更多的项目和切换完成的时间增加，图标将不再同步？ – Doidgey 2012-08-17 14:07:39

我刚刚添加了一个打开的类来显示它的工作原理，当菜单项准备就绪时，菜单字将变为黄色。是的，或多或少的项目菜单将最终不同步 – 2012-08-17 14:14:14

谢谢你好先生 – Doidgey 2012-08-17 14:18:51

切换类jQuery setTimeout

回答

相关问题