Question

尝试构建像UI这样的手风琴。我需要在添加类之间添加延迟。由于某种原因，它没有发生。

这是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>

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

1 个答案: