0
我有以下元素，點擊時顯示它是附加內容......問題是當標題中有很多文本時，元素應垂直擴展，但不是。元素的垂直響應度
感謝
我的html代碼：
<div class="faq-default-content faq-content">
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse13" class="collapsed">This is a test test test This is a test test test This is a test test test This is a test test test This is a test test test This is a test test test This is a test test test This is a test test test This is a test test test This is a test test test This is a test test test This is a test test test This is a test test test This is a test test test </a>
</h4>
</div>
<div id="collapse13" class="panel-collapse collapse" role="tabpanel">
<div class="panel-body">
<div class="panel_body_up">
<p>additional text and content</p><a href="#" target="_blank"><button style="margin-right:15px;" type="submit" class="btn theme-btn" data-loading-text="Please wait...">Take a look</button></a>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse13" class="collapsed">This is a test test test This is a test test test This is a test test test This is a test test test This is a test test test This is a test test test This is a test test test This is a test test test This is a test test test This is a test test test This is a test test test This is a test test test This is a test test test This is a test test test </a>
</h4>
</div>
<div id="collapse13" class="panel-collapse collapse" role="tabpanel">
<div class="panel-body">
<div class="panel_body_up">
<p>additional text and content</p><a href="#" target="_blank"><button style="margin-right:15px;" type="submit" class="btn theme-btn" data-loading-text="Please wait...">Take a look</button></a>
</div>
</div>
</div>
</div>
</div>
我的CSS：
.faq-default-content.faq-content {
margin-top: -10px;
}
.faq-content .panel-group .panel {
border-radius: 0;
margin-top: 10px;
}
.faq-content .panel-group .panel {
background: #fff none repeat scroll 0 0;
border-radius: 0;
box-shadow: none;
margin-top: 10px;
}
.faq-content .panel-group .panel.panel-default {
border: medium none;
}
.faq-content .panel-group .panel.panel-default .panel-heading {
background: #fff none repeat scroll 0 0;
border: 1px solid #e6e8ed;
height: 47px;
padding: 15px 0;
}
.faq-content .panel-group .panel.panel-default .panel-heading .panel-title a {
color: #333;
display: block;
font-family: 'PT Sans', sans-serif;
font-size: 14px;
padding-left: 65px;
line-height: 1.6;
position: relative;
}
.faq-content .panel-group .panel.panel-default .panel-heading .panel-title a::after {
color: #fff;
content: "\f056";
font-family: "FontAwesome";
font-size: 20px;
height: 47px;
left: -1px;
padding: 9px 15px;
position: absolute;
top: -16px;
width: 47px;
background: #276398;
}
.faq-content .panel-group .panel.panel-default .panel-heading .panel-title a.collapsed:after {
border: 1px solid #e6e8ed;
border-right: 0;
color: #276398;
content: "\f055";
font-family: "FontAwesome";
font-size: 20px;
height: 47px;
left: -1px;
padding: 9px 15px;
position: absolute;
top: -16px;
width: 47px;
background: #FFF;
}
.faq-content .panel-group .panel.panel-default .panel-collapse .panel-body {
border-top-color: #fff;
padding-bottom: 14px;
padding-top: 17px;
}
.faq-content .panel-group .panel.panel-default .panel-collapse .panel-body .panel_body_up p {
color: #8b8b8b;
font-size: 15px;
font-weight: 400;
line-height: 28px;
font-family: 'PT Sans', sans-serif;
font-style: italic;
}
請創建一個JS提琴爲我們重現您的問題。謝謝。 –
另外，您是否閱讀過Bootstrap文檔？ http://getbootstrap.com/javascript/#collapse。您需要確保您沒有切換/單擊控制，並且要顯示/隱藏的副本不在同一個容器中。 –