jquery - 在添加 2 个类之间添加延迟

Question

尝试构建类似 UI 的 Accordion 。我需要在添加到类(class)之间添加延迟。由于某种原因，它没有发生。

这是html

        <div class="page page2">
            <div class="pagetop">
                <div class="toptxt toptext2">
                 Top tab
                </div>
            </div>
            <div class="pagecnt"></div>
        </div>

CSS

.page {
margin-top:6px;
position: relative;
height:67px;
overflow: hidden;
}
.openpage {
 position:absolute;
 top:330px;
}
.openpage2 {
height:auto;
overflow: visible;
}

和 jquery

    $(".pagetop").each(function(){
        $(this).click(function(){
            $(this).parent().addClass('openpage');
               setTimeout(function(){
               $(this).parent().addClass('openpage2');
            },20000);
        });
    });

Answer 1

您的代码的问题是 setTimeout 中的 $(this) 指的是 window 对象。您可以使用闭包来修复它。就像下面的例子。

$(".pagetop").each(function(){
    $(this).click(function(){
        var self = this;
        $(this).parent().addClass('openpage');
           setTimeout(function(){
           $(self).parent().addClass('openpage2');
        },2000);
    });
});

.page {
  margin-top: 6px;
  position: relative;
  height: 67px;
  overflow: hidden;
}
.openpage {
  position: absolute;
  top: 330px;
  height: auto;
  overflow: visible;
}
.openpage2 {
  background: red;
  height: auto;
  overflow: visible;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="page page2">
  <div class="pagetop">
    <div class="toptxt toptext2">
      Top tab
    </div>
  </div>
  <div class="pagecnt"></div>
</div>