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

然而，＆＃34; parts_wrapper＆＃34;不滑动出现，它只是出现！你知道为什么会这样吗？

非常感谢

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

Answer 2

您只需从position:absolute中删除.parts即可。其余的代码看起来很完美。

更新了部件的CSS：

.parts{
    top:204px;
    left:54px;
}

工作示例：http://jsfiddle.net/bgqgjxzh/2/。

如果我帮助你，请告诉我:)

Answer 3

您只需要从像

这样的零件类中删除position:absolute;

.parts{
    top:204px;
    left:54px;
}

Answer 4

请检查此代码段

我有类似于你想要的东西。

＆＃13;

$(document).ready(function(){
    $("#flip").click(function(){
        $("#panel").slideDown("slow");
    });
});

＆＃13;

#panel, #flip {
  padding: 5px;
  text-align: center;
  background-color: #e5eecc;
  border: solid 1px #c3c3c3;
}

#panel {
  padding: 50px;
  display: none;
  top: 100px;
  position: absolute;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="flip">Click to slide down panel</div>
<div id="panel">Hello world!</div>

＆＃13;

JQuery slideDown无法按预期工作

4 个答案: