Bootstrap展開全部標籤後摺疊

我的Boostrap Collapse控件中的行爲是讓只有一個標籤打開。因此，當我嘗試展開一個標籤時，已打開的標籤已關閉，並且新標籤已打開。一切正常。Bootstrap展開全部標籤後摺疊

然而，有一個場景，我需要讓我使用此代碼展開所有選項卡，展開所有選項卡：

$('#openAllBtn').click(function (e) { 
    e.preventDefault(); 

    $('#accordion .collapse').collapse('show'); 
});

而這種代碼以關閉所有標籤：

$('#closeAllBtn').click(function (e) { 
    e.preventDefault(); 

    $('#accordion .collapse').collapse('hide'); 
});

問題是，在所有選項卡用代碼縮小後，控件的初始行爲被打破，現在當我展開另一個選項卡時，打開的選項卡未關閉，可擴展多個選項卡。

我在做什麼錯？我想重新啓動最初的行爲。

我的HTML：

<ul class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> 
    <li class="panel panel-default"> 
     <div class="panel-heading" role="tab" id="collapse-heading-1"> 
      <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse-category-1" aria-expanded="false" aria-controls="collapse-category-1"> 
       My title 1 
      </a> 
     </div> 
     <div class="panel-collapse collapse" id="collapse-category-1" role="tabpanel" aria-labelledby="collapse-heading-1"> 
      <div class="panel-body"> 
       My body 1 
      </div> 
     </div> 
    </li> 
    <li class="panel panel-default"> 
     <div class="panel-heading" role="tab" id="collapse-heading-2"> 
      <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse-category-2" aria-expanded="false" aria-controls="collapse-category-2"> 
       My title 2 
      </a> 
     </div> 
     <div class="panel-collapse collapse" id="collapse-category-2" role="tabpanel" aria-labelledby="collapse-heading-2"> 
      <div class="panel-body"> 
       My body 2 
      </div> 
     </div> 
    </li> 
    <li class="panel panel-default"> 
     <div class="panel-heading" role="tab" id="collapse-heading-3"> 
      <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse-category-3" aria-expanded="false" aria-controls="collapse-category-3"> 
       My title 3 
      </a> 
     </div> 
     <div class="panel-collapse collapse" id="collapse-category-3" role="tabpanel" aria-labelledby="collapse-heading-3"> 
      <div class="panel-body"> 
       My body 3 
      </div> 
     </div> 
    </li> 
</ul>

來源

2016-11-15 Fran_gg7

您可以發佈所有的代碼，或創建一個bootply /小提琴？ – ZimSystem

@ZimSystem我不認爲會是一個HTML問題，但我有一個我的代碼的例子;-) –

所有的JS呢？什麼觸發了「全部擴展」？ – ZimSystem

我認爲你要做到這一點..

$('.open-all').click(function(){ 
    $('.panel-collapse').removeData('bs.collapse') 
    .collapse({parent:false, toggle:false}) 
    .collapse('show') 
    .removeData('bs.collapse') 
    .collapse({parent:'#accordion', toggle:false}); 
});

http://www.codeply.com/go/03TTywsINc

來源

2016-11-15 13:41:18 ZimSystem

這是行不通的，在你的例子中，你可以重現我遇到的錯誤：該控件的第一個行爲是保持只打開一個選項卡。展開全部並全部縮小後，行爲會發生變化並保持打開N個選項卡。 –

我更新了這個例子。 Bootstrap崩潰組件必須被刪除，然後重新應用以重置手風琴的行爲。 – ZimSystem

非常感謝你！這是工作！！！ :-) –

Bootstrap展開全部標籤後摺疊

回答

相關問題