这是我的代码:
<div>
<div id="doit">press me</div>
</div>
<div class="parts_wrapper" id="index1">
<div class="parts">
<div class="part">test1</div>
<div class="part">test2</div>
<div class="part">test3</div>
<div class="part">test4</div>
<div class="part">test5</div>
<div class="part">test6</div>
<div class="part">test7</div>
</div>
</div>
<script type="text/javascript">
$("#doit").on('click', function() {
$("#index1").slideDown("slow");
});
</script>
这是响应的 CSS:
.parts_wrapper{
display:none;
}
.parts{
position:absolute;
top:204px;
left:54px;
}
.part{
width: 120px;
font-size:13px;
background-color:#000;
color: #FFF;
}
#doit{
cursor:pointer;
background-color:red;
display:inline-block;
}
然而,“parts_wrapper”并没有滑动出现,它只是出现了!您知道为什么会这样吗?
非常感谢
最佳答案
您的 position:absolute
有问题。
当您移除包装器时,它应该可以工作:
HTML
<div class="parts" id="index1">
<div class="part">test1</div>
<div class="part">test2</div>
<div class="part">test3</div>
<div class="part">test4</div>
<div class="part">test5</div>
<div class="part">test6</div>
<div class="part">test7</div>
</div>
CSS
.parts{
position:absolute;
top:204px;
left:54px;
display:none;
}
关于JQuery slideDown 无法按预期工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28538628/