尝试构建像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);
});
});
答案 0 :(得分: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>