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推該股下跌

刪除此行和它會工作