JQuery slideDown 无法按预期工作

Question

这是我的代码:

<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”并没有滑动出现，它只是出现了!您知道为什么会这样吗？

非常感谢

http://jsfiddle.net/bgqgjxzh/

Answer 1

您的 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; 
}

Demo