[英]Bootstrap - load panel collapse
我用JavaScript折疊了這個引導面板,而DIV中沒有ID,因為該頁面中的其他面板出了問題。
這是我的收合面板,加載頁面時不會收合。
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Panel 1</h3>
<span class="pull-right clickable"><i class="glyphicon glyphicon-chevron-up"></i></span>
</div>
<div class="panel-body">
Panel content
</div>
</div>
使用Javascript:
$(document).on('click', '.panel-heading span.clickable', function(e){
var $this = $(this);
if(!$this.hasClass('panel-collapsed')) {
$this.parents('.panel').find('.panel-body').slideUp();
$this.addClass('panel-collapsed');
$this.find('i').removeClass('glyphicon-chevron-up').addClass('glyphicon-chevron-down');
} else {
$this.parents('.panel').find('.panel-body').slideDown();
$this.removeClass('panel-collapsed');
$this.find('i').removeClass('glyphicon-chevron-down').addClass('glyphicon-chevron-up');
}
})
和CSS:
.row{
margin-top:40px;
padding: 0 10px;
}
.clickable{
cursor: pointer;
}
.panel-heading span {
margin-top: -20px;
font-size: 15px;
}
頁面加載時如何加載折疊面板?
我希望能解釋我的問題,謝謝
只需使其默認折疊即可:
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Panel 1</h3>
<span class="pull-right clickable panel-collapsed"><i class="glyphicon glyphicon-chevron-down"></i></span>
</div>
<div class="panel-body">
Panel content
</div>
</div>
CSS
.panel-body {
display: none;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.