slideToggle 没有向下推 div
slideToggle not pushing down lower div
我在让 jQuery 的 slideToggle 将 div 下推到已切换的 div 下方时遇到一些问题。关于这个问题已有多个帖子,但答案通常似乎是 divs 必须是 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">4</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>
在 .content #mockup1 .package-rates
中你设置 height: 40px;
在此 div 上设置高度使得 .toggle-section
无法将 div 向下推
删除这一行,它将起作用
这里的问题实际上不是元素的定位,而是您为它们定义的静态尺寸 - 这与 .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。希望这可以帮助!如果您有任何问题,请告诉我。
我在让 jQuery 的 slideToggle 将 div 下推到已切换的 div 下方时遇到一些问题。关于这个问题已有多个帖子,但答案通常似乎是 divs 必须是 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">4</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>
在 .content #mockup1 .package-rates
中你设置 height: 40px;
在此 div 上设置高度使得 .toggle-section
无法将 div 向下推
删除这一行,它将起作用
这里的问题实际上不是元素的定位,而是您为它们定义的静态尺寸 - 这与 .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。希望这可以帮助!如果您有任何问题,请告诉我。