Question

我有一个简单的slide-content-element，如果点击链接，它应该显示它的内容。

这是我的标记：

<div class="boxwrap hidden-sm hidden-xs">
 <div class="boxright pull-left">
  <a href="#" id="toggleContactOpen" class="pull-left"><img src="img/envelope.png" alt="envelope-icon"></a>
    <div class="detail">
     <p>
      01234-567 890 123 4
      <a href="mailto:example@example.com" title="Write an E-Mail">example@example.com</a>
     </p>
    </div>
  </div>
</div>

这是我的jQuery：

$("#toggleContactOpen").click(function(){
    if($(".boxright").hasClass("showbox")) {
        $(".boxright").toggleClass("showbox");
        $(".detail").toggleClass("open-detail");
    }
    else {
        $(".boxright").toggleClass("showbox").delay(500).queue(function(){ 
            $(".detail").toggleClass("open-detail");
        });
    }
});

首次点击，一切顺利：boxright得到了课程＆＃34; showbox＆＃34;并且细节在500ms之后得到了班级＆＃34;开放细节＆＃34;结束也仍然有效，两个班级都在逐渐关闭元素。但是在第三次点击时，只有boxright才能获得课程＆＃34; showbox＆＃34;，但是细节并没有得到开放式细节＆＃34;。我不知道为什么......如果你能帮助我，我将不胜感激。

Answer 1

您需要使用.dequeue()来结束自定义队列功能。

$(".boxright").toggleClass("showbox").delay(500).queue(function(){ 
    $(".detail").toggleClass("open-detail");
    $(this).dequeue();
});

jQuery队列函数在toggleClass发生后做了一些事情

1 个答案: