打开其他面板时如何关闭其他面板

How to close other panels when another one is opened

本文关键字：其他 何关闭      更新时间：2023-09-26

我是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>

JSFIDDLE链接

Bootstrap提供了collapse.js来做同样的事情。

这里是参考：引导。

或者去摆弄

你只需要这样做：

$('.panel-title a').collapse();

由于您的问题有点含糊，我不清楚您的要求。请看一下这个代码。我想这可能是你再次询问

在这里摆弄

HTML

//Same as in you code, java script part is not needed

查询

    $(document).ready(function () {
    $(".panel-heading").click(function () {
        $(this).closest(".panel").find(".panel-body").toggleClass("hide");
    });
    $(".fa.fa-times").click(function(){
        $(".panel-body").addClass("hide");
        $(this).parent(".panel").find(".panel-body").removeClass("hide");
    });
});

编辑

检查更新的fiddle

相关文章：