jquery - slideToggle 没有向下推低 div

Question

我在让 jQuery 的 slideToggle 将 div 下推到已切换的 div 下方时遇到了一些问题。关于这个问题已有多个帖子，但答案通常似乎是 div 必须是 position: relative，这已经是这样了。我知道罪魁祸首是包装器 div class="content"但我终究无法弄清楚为什么它会影响行为以及如何解决它。

这是一个 Fiddle演示。

此外，这是我在 Stack Snippet 中的代码:

$(".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

这里的问题实际上不是您的元素的定位，而是您为它们定义的静态尺寸 - 这与您的 .toggle-section 元素的动态特性相冲突。

在 .content #mockup1 .package-rates(您正在操作的元素的父元素)上，您指定了 height: 40px - 这意味着无论它的 child 有多高，它会被相邻元素视为始终具有 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 .希望这可以帮助!如果您有任何问题，请告诉我。