Question

我是bootstrap和jquery中的新手，使用下面的代码创建了许多引导面板，我的问题是，当我点击一个面板的全尺寸图标时，我想关闭其他面板有人知道怎么做吗？谢谢

<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 link

Answer 1

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

这里是参考：Bootstrap。

或转到fiddle

你只需要这样做：

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

Answer 2

由于你的问题含糊不清，我不清楚你的要求。请看一下这段代码。我想这可能是你的问题

摆弄here

<强> HTML

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

<强> JQUERY

    $(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

如何在打开另一个面板时关闭其他面板

2 个答案: