我是 bootstrap 和 jquery 的新手,使用下面的代码创建许多 bootstrap 面板,我的问题是,当我单击一个面板的全尺寸图标时,我想关闭其他面板 有人知道怎么做吗? 谢谢
<div class="panel panel-primary">
<div class="panel-heading">
<h4 class="panel-title"> Panel Widget Title
<div class="pull-right"> <a href="#" data-perform="panel-dismiss" class="btn btn-primary btn-xs pull-right"><i class="fa fa-times"></i></a> <a href="#" data-perform="panel-collapse" class="btn btn-primary btn-xs pull-right"><i class="fa fa-minus"></i></a> </div>
</h4>
</div>
<div class="panel-wrapper collapse in">
<div class="panel-body"> Panel Widget Body </div>
</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">
<h4 class="panel-title"> Panel Widget Title
<div class="pull-right"> <a href="#" data-perform="panel-dismiss" class="btn btn-primary btn-xs pull-right"><i class="fa fa-times"></i></a> <a href="#" data-perform="panel-collapse" class="btn btn-primary btn-xs pull-right"><i class="fa fa-minus"></i></a> </div>
</h4>
</div>
<div class="panel-wrapper collapse in">
<div class="panel-body"> Panel Widget Body </div>
</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">
<h4 class="panel-title"> Panel Widget Title
<div class="pull-right"> <a href="#" data-perform="panel-dismiss" class="btn btn-primary btn-xs pull-right"><i class="fa fa-times"></i></a> <a href="#" data-perform="panel-collapse" class="btn btn-primary btn-xs pull-right"><i class="fa fa-minus"></i></a> </div>
</h4>
</div>
<div class="panel-wrapper collapse in">
<div class="panel-body"> Panel Widget Body </div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
(function($, window, document){
var panelSelector = '[data-perform="panel-collapse"]';
$(panelSelector).each(function() {
var $this = $(this),
parent = $this.closest('.panel'),
wrapper = parent.find('.panel-wrapper'),
collapseOpts = {toggle: false};
if( ! wrapper.length) {
wrapper =
parent.children('.panel-heading').nextAll()
.wrapAll('<div/>')
.parent()
.addClass('panel-wrapper');
collapseOpts = {};
}
wrapper
.collapse(collapseOpts)
.on('hide.bs.collapse', function() {
$this.children('i').removeClass('fa-minus').addClass('fa-plus');
})
.on('show.bs.collapse', function() {
$this.children('i').removeClass('fa-plus').addClass('fa-minus');
});
});
$(document).on('click', panelSelector, function (e) {
e.preventDefault();
var parent = $(this).closest('.panel');
var wrapper = parent.find('.panel-wrapper');
wrapper.collapse('toggle');
});
}(jQuery, window, document));
(function($, window, document){
var panelSelector = '[data-perform="panel-dismiss"]';
$(document).on('click', panelSelector, function (e) {
e.preventDefault();
var parent = $(this).closest('.panel');
removeElement();
function removeElement() {
var col = parent.parent();
parent.remove();
col.filter(function() {
var el = $(this);
return (el.is('[class*="col-"]') && el.children('*').length === 0);
}).remove();
}
});
}(jQuery, window, document));
});
</script>
最佳答案
Bootstrap 提供 collapse.js做同样的事情。
这里是引用:Bootstrap .
或前往fiddle
你只需要这样做:
$('.panel-title a').collapse();
关于javascript - 如何在打开另一个面板时关闭其他面板,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31111511/