引導崩潰 - 在同一時間

Question

我有一個點，我的手風琴在同一時間打開打開多個手風琴 - 見http://www.bootply.com/Go4t29rYyF

當你點擊「TAB1」所有「tab1s」公開，當你點擊「tab2」打開所有「tab2s」時 - 很棒！但我不能同時打開「tab1s & tab2s」，它只有在打開另一個標籤之前關閉其中一個標籤時才起作用。問題出在我的js上，但無法解決。

$(function() { 

     var $active = true; 

     $('.panel-title > a').click(function (e) { 
      e.preventDefault(); 
     }); 

     $('.number1-collapse').on('click', function() { 
      if (!$active) { 
       $active = true; 
       $('.panel-title > a').attr('data-toggle', 'collapse'); 
       $('.number1').collapse('hide'); 
      } else { 
       $active = false; 
       $('.number1').collapse('show'); 
       $('.panel-title > a').attr('data-toggle', ''); 
      } 
     }); 


     $('.number2-collapse').on('click', function() { 
      if (!$active) { 
       $active = true; 
       $('.panel-title > a').attr('data-toggle', 'collapse'); 
       $('.number2').collapse('hide'); 
      } else { 
       $active = false; 
       $('.number2').collapse('show'); 
       $('.panel-title > a').attr('data-toggle', ''); 
      } 
     }); 
    }); 

Answer 1

我收拾你的代碼，改爲使用toggle方法，而不是具有各種標誌工作。問題是你在他們之間共享活動標誌。這裏是改進的代碼和Bootply：

$(function() { 
    $('.panel-title > a').click(function (e) { 
     e.preventDefault(); 
    }); 

    $('.number1-collapse').on('click', function() { 
     $('.number1').collapse('toggle'); 
    }); 

    $('.number2-collapse').on('click', function() { 
     $('.number2').collapse('toggle'); 
    }); 
}); 

Answer 2

您可能需要指定要使用的事件參數

例在功能影響的元素：

$('.number2-collapse').on('click', function (event) { 
     var panelTitle = $(event.currentTarget).find('.panel-title > a'); 
     var number = $(event.currentTarget).find('.number2'); 
     if (!$active) { 
      $active = true; 
      $(panelTitle).attr('data-toggle', 'collapse'); 
      $(number).collapse('hide'); 
     } else { 
      $active = false; 
      $(number).collapse('show'); 
      $(panelTitle).attr('data-toggle', ''); 
     } 
    }); 

這是一個例子。 您可能需要更改此代碼爲它在你的情況