Div 动画不会向下平移

Question

我一直在尝试让这个 div 在单击按钮时向下滑动，但动画全都搞砸了。 div 打开或关闭时会出现故障。

我尝试添加 position:relative 和 overflow:hidden ，但它似乎不起作用（请记住，我也在使用 Bootstrap）。

$(document).ready(function(){
    $(".faqOuter").click(function(){
        $(".faqInner").slideToggle("slow");
    });
});

p{
	vertical-align: middle;
	margin: 0 !important;
}

.faqOuter{
	color: white;
	background-color: #262626;
	text-align: center;
	font-size: 20px !important;
	height: 30px;
	border: solid;
	border-color: #262626;
	padding: 0 0 5px 0;
}

.faqInner{
	padding: 40px 35px 40px 40px !important;
	position: relative !important;
	border: solid;
	border-color: #F3F3F3;
	display: none;
	overflow: hidden;
	min-height: 0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h4 class="faqOuter col-md-8 col-md-offset-2">Trial One Bar</h4>
			<div class="faqInner col-md-12">
				<p>Alienum phaedrum torquatos nec eu, vis detraxit periculis ex, nihil expetendis in mei.</p>
			</div>

Answer 1

您需要从填充中删除 !important，因为它会使过渡期间的高度计算变得混乱。

$(document).ready(function() {
  $(".faqOuter").click(function() {
    $(".faqInner").slideToggle("slow");
  });
});

p {
  vertical-align: middle;
  margin: 0 !important;
}

.faqOuter {
  color: white;
  background-color: #262626;
  text-align: center;
  font-size: 20px !important;
  height: 30px;
  border: solid;
  border-color: #262626;
  padding: 0 0 5px 0;
}

.faqInner {
  padding: 40px 35px 40px 40px;
  border: solid;
  display: none;
  border-color: #F3F3F3;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h4 class="faqOuter col-md-8 col-md-offset-2">Trial One Bar</h4>
<div class="faqInner col-md-12">
  <p>Alienum phaedrum torquatos nec eu, vis detraxit periculis ex, nihil expetendis in mei.</p>
</div>