設置Bootstrap 3手風琴的顯示三角形

Question

對於Bootstrap 3手風琴控件似乎沒有手風琴標題上的打開/關閉內置n類切換鍵，我感到非常沮喪。

我需要一個手風琴，當它的孩子打開時，標題上有一個css類，而對於孩子則關閉了。 我已經關閉了以下代碼，但是當用戶關閉並已經打開窗格而未選擇其他窗格時，這並不能解決這種情況-僅當您繼續選擇其他窗格時，它才可以正常工作。

我需要標題正確顯示狀態的3件事：

• 當默認情況下將窗格設置為打開時（將“ in”類添加到該窗格的html中）
• 手動打開或關閉時，顯示正確的類
• 通過單擊其他窗格關閉時關閉

我到目前為止

    $(function() {
   $('h4.panel-title').each(function() {
        // check all headers to see if they have open children
        var isOpen = $(this).closest('.panel').find('.panel-collapse').hasClass('in');
        // and, if yes, set the class to "open"
        if (isOpen) {
            $(this).addClass('open');
        }
   });
   $('h4.panel-title').on('click', function(event) {
        // remove "open" class from all headers in this group
        $(this).closest('.accordion-group').find('h4.panel-title').removeClass('open');
        // then set the one clicked on to open
        $(this).addClass('open');
   });

與此HTML：

<div class="panel-group accordion-group" id="accordion">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h4 class="panel-title">
            <a data-toggle="collapse" data-parent="#accordion" data-target="#collapseOne">
              Collapsible Group Item #1
            </a>
          </h4>
        </div>
        <div id="collapseOne" class="panel-collapse collapse in">
          <div class="panel-body">
            text...
          </div>
        </div>
      </div>
      <div class="panel panel-default">
        <div class="panel-heading">
          <h4 class="panel-title">
            <a data-toggle="collapse" data-parent="#accordion" data-target="#collapseTwo">
              Collapsible Group Item #2
            </a>
          </h4>
        </div>
        <div id="collapseTwo" class="panel-collapse collapse">
          <div class="panel-body">
            text...
          </div>
        </div>
      </div>
      <div class="panel panel-default">
        <div class="panel-heading">
          <h4 class="panel-title">
            <a data-toggle="collapse" data-parent="#accordion" data-target="#collapseThree">
              Collapsible Group Item #3
            </a>
          </h4>
        </div>
        <div id="collapseThree" class="panel-collapse collapse">
          <div class="panel-body">
            text...
          </div>
        </div>
      </div>
    </div>

粘貼到小提琴中並不能完全幸免，但這是： http : //jsfiddle.net/smlombardi/kW33s/

Answer 1

嘗試這個，

$(function() {    
   $('h4.panel-title').on('click', function(event) {
           // remove "open" class from all headers in this group
           $(this).closest('.accordion-group').find('h4.panel-title').removeClass('open');
           // remove "in" class from all collapse panel
           $(this).closest('.accordion-group').find('.collapse').removeClass("in");
           // then set the one clicked on to open
           $(this).addClass('open');
           $(this).parent().next(".collapse").addClass("in");
   });
});

的jsfiddle

Answer 2

我找到了這個

Bootstrap 3手風琴的開/關樣式

我意識到掛入BS3手風琴事件比單擊事件更好，因為我遇到的問題是即使單擊將要關閉窗格，窗格在單擊時也具有IN類。