Bootstrap手風琴不會崩潰

Question

我有這個簡單的手風琴代碼。 單擊組標題后，內容將按預期顯示。 但是，當我單擊另一個組標題時，以前打開的內容不會隱藏。

我不希望同時顯示多個內容，也找不到我做錯的事情。

這是我的手風琴實施方案，我不向您展示其內容，因為它是動態生成的，並且比其他任何東西都更容易引起混亂：

<div id="accordion" class="panel-group">
  // accordion members are generated with a xslt template, in response
  // of a window service
   <div class="panel panel-default">
      <div class="panel-heading">
         <div class="panel-title">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse{id}">
         // This section is generated dynamically 
            </a>
         </div>
      </div>
      <div id="collapse{id}" class="panel-collapse collapse">
         <div class="panel-body">
      // the main content is dynamically generated too.
         </div>
      </div>
   </div>
</div>

Answer 1

<div id="accordion" class="panel-group">
// accordion members are generated with a xslt template, in response
// of a window service
 <div class="panel panel-default">
  <div class="panel-heading">
     <div class="panel-title">
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseone">
           // This section is generated dynamically 
        </a>
     </div>
  </div>
  <div id="collapseone" class="panel-collapse collapse">
     <div class="panel-body">
        // the main content is dynamically generated too.
     </div>
  </div>
</div>
<div class="panel panel-default">
  <div class="panel-heading">
     <div class="panel-title">
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapsetwo">
     // This section is generated dynamically 
        </a>
     </div>
  </div>
  <div id="collapsetwo" class="panel-collapse collapse">
     <div class="panel-body">
  // the main content is dynamically generated too.
     </div>
  </div>

jsfiddle.net/dJDHd/966/

在此示例中，它具有兩個組並且可以正常工作。 一個條件是每個人都有唯一的ID。

Answer 2

嗨，我有同樣的問題。 我不確定這是否是最好的解決方案，但對我有很大幫助。

我創建了一個函數，該函數始終檢查.panel標題的錨點子代。 我稱它們為#header {{$ i}}。 因此，我檢查錨點是否具有.collapsed類。 如果它具有類.collapsed，那么我使用引導函數：.collapse（“ hide”）;

  $(document).ready(function(){ function checkCollapse{{$i}}(){ if($('#header{{$i}}').hasClass('collapsed')){ $('#collapse{{$i}}').collapse("hide"); } setTimeout(checkCollapse{{$i}}, 100); } checkCollapse{{$i}}(); }); 

HTML：

 <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="heading{{$i}}"> <h4 class="panel-title"> <a id='header{{$i}}' role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse{{$i}}" aria-expanded="false" aria-controls="collapse{{$i}}"> //Content <i class="fa fa-chevron-circle-down" aria-hidden="true"></i> </a> </h4> </div> <div id="collapse{{$i}}" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading{{$i}}"> <div class="panel-body"> //Content </div> </div> </div> 

這是我創建的最終代碼。 當然，您必須對代碼進行一些修改。

我真的希望它能對您有所幫助。