slideToggle没有按下较低的div

Question

我有一些麻烦，让jQuery的slideToggle推下切换的div下的div。在这个问题上有多个现有的帖子，但答案通常似乎是divs必须是position：relative，事实已经如此。我知道罪魁祸首是包装div class =“content”，但我不能为了我的生活找出它为什么影响行为，因此如何去解决它。

这是Fiddle演示。

而且，这是我在一个堆栈代码片段：

$(".toggle-control").click(function() { 
 
    $(this).find(".toggle-section").slideToggle(); 
 
});

.hidden-section { 
 
    display: none; 
 
} 
 
.content { 
 
    max-width: 945px; 
 
    margin: 0 auto; 
 
    background: #fff; 
 
    border: 1px solid #f3eee2; 
 
    box-shadow: 0 0 10px 0 #333; 
 
    padding: 0 18px 20px 18px; 
 
    min-height: 626px; 
 
    -moz-box-sizing: initial; 
 
    -webkit-box-sizing: initial; 
 
    box-sizing: initial; 
 
} 
 
.content #mockup1 { 
 
    margin: 50px 0 50px 0; 
 
} 
 
.content #mockup1 .package-image { 
 
    width: 540px; 
 
} 
 
.content #mockup1 .package-details { 
 
    width: 400px; 
 
    float: right; 
 
} 
 
.content #mockup1 .package-details .package-details--header { 
 
    font-size: 24px; 
 
    padding: 5px 0 10px 25px; 
 
} 
 
.content #mockup1 .package-details .package-details--list { 
 
    list-style: none; 
 
} 
 
.content #mockup1 .package-details .package-details--list li { 
 
    padding: 0; 
 
} 
 
.content #mockup1 .package-rates { 
 
    height: 40px; 
 
    line-height: 40px; 
 
    margin: 10px 0 0 0; 
 
    padding: 0 20px 0 20px; 
 
    background-color: #f9f5ea; 
 
} 
 
.content #mockup1 .package-rates .package-rates--from { 
 
    font-size: 14px; 
 
    padding: 0 10px 0 0; 
 
} 
 
.content #mockup1 .package-rates .package-rates--price { 
 
    font-size: 24px; 
 
    font-weight: bold; 
 
} 
 
.content #mockup1 .package-rates .package-rates--per { 
 
    font-size: 14px; 
 
    padding: 0 0 0 10px; 
 
} 
 
.content #mockup1 .package-rates .package-rates--dropdown { 
 
    float: right; 
 
} 
 
.content #mockup1 .package-rates .package-rates--dropdown .package-rates--view { 
 
    font-size: 18px; 
 
    font-weight: 500; 
 
} 
 
.content #mockup1 .package-rates .package-rates--dropdown .caret { 
 
    border-left: 6px solid transparent; 
 
    border-right: 6px solid transparent; 
 
    border-top: 6px dashed; 
 
} 
 
.content #mockup1 .package-rates:hover { 
 
    background-color: #e9e0c9; 
 
    cursor: pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="content"> 
 
    <div class="mockup" id="mockup1"> 
 

 
    <img class="package-image" src="http://cdn4.bluefieldsvillas.com/wp-content/uploads/2013/07/san-michele-3.jpg" /> 
 

 
    <div class="package-details"> 
 

 
     <h2 class="package-details--header">San Michele</h2> 
 

 
     <ul class="package-details--list"> 
 
     <li>Available</li> 
 
     <li>6 Rooms</li> 
 
     <li>Private Pool</li> 
 
     <li>Saturday - Saturday</li> 
 
     <li> 
 
      <br />Included Packages: 
 
      <ul> 
 
      <li>All Inclusive</li> 
 
      <li>Airport Transportation</li> 
 
      <li>Club Mobay</li> 
 
      </ul> 
 
     </li> 
 
     <li> 
 
      <br />Available Packages: 
 
      <ul> 
 
      <li>Wedding</li> 
 
      <li>Vow Renewal</li> 
 
      </ul> 
 
     </li> 
 
     </ul> 
 

 
    </div> 
 

 
    <div class="clearfix"></div> 
 

 
    <div class="package-rates toggle-control"> 
 

 
     <span class="package-rates--from">From</span> 
 
     <span class="package-rates--price">$234</span> 
 
     <span class="package-rates--per">/ Person/Night</span> 
 
     <span class="package-rates--dropdown"> 
 
        <span class="package-rates--view">View Rates</span> 
 
     <span class="caret"></span> 
 
     </span> 
 

 
     <div class="toggle-section hidden-section"> 
 
     <ul> 
 
      <li>foo</li> 
 
      <li>bar</li> 
 
      <li>baz</li> 
 
     </ul> 
 
     </div> 
 

 
    </div> 
 

 
    </div> 
 

 
    <div style="height:200px; background-color:green;"></div> 
 
</div>

Answer 1

这里的问题实际上并不是您的元素的定位，而是您为其定义的静态维度 - 这与您的元素的动态特性相冲突。

在.content #mockup1 .package-rates（您正在操作的元素的父元素）上，您指定了height: 40px--这意味着无论孩子有多高，它都会被相邻元素视为始终具有40px的高度。

如果你想要的元素至少为40像素，而且增长，以适应它的孩子，他们应该是高，可以考虑使用min-height代替：

.content #mockup1 .package-rates { 
    min-height: 40px; 
    line-height: 40px; 
    margin: 10px 0 0 0; 
    padding: 0 20px 0 20px; 
    background-color: #f9f5ea; 
} 

这里是一个updated JSFiddle。希望这可以帮助！如果您有任何问题，请告诉我。

Answer 2

在.content #mockup1 .package-rates设置height: 40px;

在这个div设置的高度使得它不可能为.toggle-section推该股下跌

删除此行和它会工作