我如何處理 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');
   });