如何解決開啓和關閉div bootstrap問題？

我使用把手呈現項目列表，我使用引導爲每個項目創建切換div。把手工作正常，也是切換，但不是bootstrap的closing-div功能。如何解決開啓和關閉div bootstrap問題？

（我已經嘗試使用引導手風琴，但它不工作，所以我想解決使用jQuery問題）

每次我打開一個新的div應該關閉另一個（如果有已經開放）;這不起作用，我可以打開多個面板的時間。

<section id="list-wrap"> 

    <script id="list-items" type="text/x-handlebars-template"> 
    {{#each cards}} 

     <div class="panel"> 
     <div class="panel-heading grad"> 
      <h4> 
      <span class="title-style">{{name}}</span> 
      <a data-toggle="collapse" href="#{{this.code}}"> 
       <i class="chevron_toggleable indicator glyphicon glyphicon-chevron-right pull-left"></i> 
       </a> 
      <p class="apr title-style"> {{apr}} % APR </p> 
      </h4> 
     </div> 
     <div id="{{this.code}}" class="changeClass panel-collapse collapse"> 
      <div class="panel-body"> 
      <div> 
       <div class="img-div"> 
       <img src="assets/{{code}}.png"> 
       </div> 
       <div class="info-div"><p class="info-paragraf">{{information}}</p> 
       </div> 
       <div class="cashback-div"> 
       <p class="cashback-paragraf-1">Cashback</p> 
       <p class="cashback-paragraf-2">{{cashback}}</p> 
       </div> 
      </div> 
      </div> 
     </div> 
     </div> 

    {{/each}} 
    </script> 

</section>

，這是工作，直到我添加了一個Express服務器：

$('i').click(function() { 
    $('.changeClass').removeClass('in'); 
});

來源

2015-11-23 Massimiliano Mura

已解決。這是一個異步問題。 js函數正在工作。 –

嘗試使用jQuery UI的手風琴作爲一個選項。

您只需將項目放在手風琴標籤中，將每個項目作爲手風琴div的孩子包裝在一個div中，然後在手風琴div上調用手風琴方法。

http://jqueryui.com/accordion/

來源

2015-11-23 15:24:30 Korgrue

我會用一個jquery手風琴功能像這樣的。 Fiddle

$('#accordion').accordion({ 
     collapsible:true, 

    beforeActivate: function(event, ui) { 
     // The accordion believes a panel is being opened 
     if (ui.newHeader[0]) { 
      var currHeader = ui.newHeader; 
      var currContent = currHeader.next('.ui-accordion-content'); 
     // The accordion believes a panel is being closed 
     } else { 
      var currHeader = ui.oldHeader; 
      var currContent = currHeader.next('.ui-accordion-content'); 
     } 
     // Since we've changed the default behavior, this detects the actual status 
     var isPanelSelected = currHeader.attr('aria-selected') == 'true'; 

     // Toggle the panel's header 
     currHeader.toggleClass('ui-corner-all',isPanelSelected).toggleClass('accordion-header-active ui-state-active ui-corner-top',!isPanelSelected).attr('aria-selected',((!isPanelSelected).toString())); 

     // Toggle the panel's icon 
     currHeader.children('.ui-icon').toggleClass('ui-icon-triangle-1-e',isPanelSelected).toggleClass('ui-icon-triangle-1-s',!isPanelSelected); 

     // Toggle the panel's content 
     currContent.toggleClass('accordion-content-active',!isPanelSelected)  
     if (isPanelSelected) { currContent.slideUp(); } else { currContent.slideDown(); } 

     return false; // Cancels the default action 
    } 
});

來源

2015-11-24 14:57:30

如何解決開啓和關閉div bootstrap問題？

回答

相關問題