Question

我在使用jQuery的slideToggle来推倒切换div下方的div时遇到了一些麻烦。在这个问题上有多个现有帖子，但答案通常似乎是div必须是position：relative，这已经是这种情况。我知道罪魁祸首是包装div class =＆＃34; content＆＃34;但我不能为我的生活找出它影响行为的原因，以及如何解决它。

这是一个Fiddle演示。

另外，这里是我在Stack Snippet中的代码：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

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

在.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无法按下div

删除此行，它将起作用

slideToggle没有按下div

2 个答案: