Question

我有一个按钮，当点击时，我希望它延迟切换另一个元素的类。所以逻辑是：

点击按钮
延迟500毫秒
添加课程
再次点击同一按钮
延迟500毫秒
删除课程

这是我到目前为止所得到的：

jQuery(".menu-button").click(function(){
    jQuery(".nav-bar-logo").delay(500).queue(function() {
        jQuery(this).toggleClass("nav-bar-logo-active");
    });
});

我知道在处理延迟和addClass以及removeClass时需要排队，但它似乎不适用于toggleClass

我得到的代码部分有效：该类在初始点击延迟后切换，但再次点击时它没有做任何事情。

任何人都有想法解决这个问题吗？

Answer 1

this不可用，因为它处于延迟功能，但我们可以访问点击事件：

jQuery(".menu-button").click(function(){
        window.setTimeout(function(){
                jQuery('.nav-bar-logo').toggleClass("nav-bar-logo-active");
            }, 500);
    });

Answer 2

如评论中所述，您正在寻找.setTimeout()。根据下面的评论，您想要切换.nav-bar-logo，您可以这样做：

jQuery('.menu-button').click(function() {
  window.setTimeout(function() {
    jQuery('.nav-bar-logo').toggleClass('nav-bar-logo-active');
  }, 500);
});

这是一个小DEMO

＆＃13;

jQuery('.menu-button').click(function() {
  window.setTimeout(function() {
    jQuery('.nav-bar-logo').toggleClass('nav-bar-logo-active');
  }, 500);
});

＆＃13;

.nav-bar-logo {
  padding: 50px;
  background: red
}

.nav-bar-logo-active {
  background: green
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="menu-button">
  toggle button
</button>
<div class="nav-bar-logo">
  I'm going to change color when button toggled
</div>

＆＃13;

单击延迟切换类

2 个答案: