打开另一个面板时如何关闭其他面板 [英] How to close other panels when another one is opened

查看:134
本文介绍了打开另一个面板时如何关闭其他面板的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我是bootstrap和jquery的新手,使用下面的代码创建许多bootstrap面板,我的问题是,当我单击一个面板的全尺寸图标时,我想关闭其他面板 有人知道该怎么办吗? 谢谢

I'm newbie in bootstrap and jquery, using the code below to create many bootstrap panels, my problem is that I would like to close the others panels when i click in full size icon of one panel someone know how can do it? thank you

<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提供了

Bootstrap provides collapse.js to do the same.

这里是参考文献: Bootstrap .

或转到小提琴

您只需要这样做:

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

这篇关于打开另一个面板时如何关闭其他面板的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆