我如何处理 bootstrap div 折叠和展开的奇怪行为

Question

嗨，我刚刚创建了一个与此线程相关的问题。 但我在下面发现了 bootstrap 的奇怪行为：（请看我之前的问题： https : //stackoverflow.com/questions/39786787/how-to-handle-collapse-expand-all-with-single-click-accordion-work -一起在-b )

我有 2 个不同的面板组，因为我在它们之间添加了一些段落。

 <div class="row extra-left-padding-0">

<div class="spaced-columns">
    <div class="container">


        <button class="collapse-init">Click to disable accordion behavior</button>
        <br />
    </div>

    <div class="container">
        <div class="row">
            <div class="panel panel-default">
                <div class="panel-body">

                    <legend class="col-xs-6 col-sm-5 control-label">1-Yönetici Degerlendirme</legend>
                    <div class="col-xs-6 col-sm-2 col-sm-height col-sm-top">
                        <div id="g0"></div>

                    </div>
                    <div class="clearfix visible-xs-block"></div>
                    <div class="col-xs-4 col-sm-3">
                        <h4>Axp/10 : 
                          </h4>
                    </div>
                    <div class="col-xs-2 col-sm-2">

                    </div>
                </div>
            </div>
        </div>
        <div class="panel-group" id="accordion0">
            <div class="panel panel-default">
                <div class="panel-heading" data-parent="#accordion0" data-target="#collapse0" data-toggle="collapse" role="button">
                    <h4 class="panel-title accordion-toggle">1-Yönetici Değerlendirme Kriterler
      <i class="fa fa-chevron-down fa pull-right"></i>
                    </h4>
                </div>
                <div class="panel-collapse collapse" id="collapse0" role="tabpanel">
                    <div class="panel-body">
                        test0

                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container">


        <div class="row">
            <div class="panel panel-default">
                <div class="panel-body">

                    <legend class="col-xs-6 col-sm-5 control-label">2-Piyasa Ve Şirket içi İstihbarat</legend>
                    <div class="col-xs-6 col-sm-2 col-sm-height col-sm-top">
                        <div id="g1"></div>


                    </div>
                    <div class="clearfix visible-xs-block"></div>
                    <div class="col-xs-6 col-sm-3">
                        <h4>Axp/10 : 
                        </h4>
                    </div>
                    <div class="col-xs-2 col-sm-2">

                    </div>
                </div>
            </div>
        </div>
        <div class="panel-group" id="accordion1">
            <div class="panel panel-default">
                <div class="panel-heading" data-parent="#accordion1" data-target="#collapse1" data-toggle="collapse" role="button">
                    <h4 class="panel-title">2-Piyasa Ve Şirket içi İstihbarat Kriterler
      <i class="fa fa-chevron-down fa pull-right"></i>
                    </h4>
                </div>
                <div  class="panel-collapse collapse" id="collapse1" role="tabpanel">
                    <div class="panel-body">
                        TEST
                    </div>
                </div>
            </div>
        </div>
    </div>

    </div>
    </div>

看看这个奇怪的行为：

（这个不起作用。不会崩溃。）

  $('#accordion1').on('show.bs.collapse', function () {
            $('#collapse1').collapse('hide');
            console.log('collpase0 is clicked');
        });

但如果我改变这一点；

 $('#accordion1').on('show.bs.collapse', function () {
            $('#collapse0').collapse('hide');
            console.log('collpase0 is clicked');
        });

我将collapse1 id设为collapse0，如果我点击accrodion1 collapsing 适用于accordion0，但如果我这样做：

  $('#accordion1').on('show.bs.collapse', function () {
            $('#collapse1').collapse('hide');
            console.log('collpase0 is clicked');
        });

它正在崩溃，但没有成功 不工作我该如何解决？ 如果我单击accordion0，它应该折叠其内容。

Answer 1

让我说得对，您正在尝试创建一个中间有段落的手风琴效果，这样如果您打开一个面板，另一个面板应该关闭？ 是不是这样，如果是这种情况，那么您需要简单地交替折叠动作。 这是我根据您的代码创建的小提琴，显示了这个https://jsfiddle.net/icerebellion/c59jk54h/1/

$('#accordion0').on('show.bs.collapse', function() {
     $('#collapse1').collapse('hide');
     console.log('collpase0 is clicked');
   });
   $('#accordion1').on('show.bs.collapse', function() {
     $('#collapse0').collapse('hide');
     console.log('collpase1 is clicked');
   });