2013-11-21 22 views
2

我正在嘗試使用手風琴的引導程序摺疊,但沒有使用所有data-屬性標記。我看到它在創建時切換,但我希望面板標題中的兩個錨控制摺疊。我知道如何用jQuery手動執行此操作,但我認爲我應該可以通過一次調用.collapse()來完成此操作。如何在沒有數據標記的情況下使用手風琴的引導程序3摺疊?

JS

$('.collapse').collapse(); 
//$('.t-title,.t-toggle').collapse(); // also tried this with no luck 

HTML

<!-- notices start --> 
<div class="row spaced" id="notice"> 
    <div class="col"> 
    <div class="panel-group" id="accordion"> 
     <!-- start update --> 
     <div class="panel panel-warning"> 
     <div class="panel-heading"> 
      <h4 class="panel-title"> 
      <a class="t-title" href="#notice-1">title</a> 
      <a class="t-toggle" href="#notice-1">toggle</a> 
      </h4> 
     </div> 
     <div id="notice-1" class="panel-collapse collapse in"> 
      <div class="panel-body"><p>content</p><p>content</p><p>content</p></div> 
     </div> 
     </div> 
     <!--/end update --> 
     <!-- start update --> 
     <div class="panel panel-success"> 
     <div class="panel-heading"> 
      <h4 class="panel-title"> 
      <a class="t-title" href="#notice-2">title</a> 
      <a class="t-toggle" href="#notice-2">toggle</a> 
      </h4> 
     </div> 
     <div id="notice-2" class="panel-collapse collapse"> 
      <div class="panel-body"><p>content</p><p>content</p><p>content</p></div> 
     </div> 
     </div> 
     <!--/end update --> 
     <!-- start update --> 
     <div class="panel panel-danger"> 
     <div class="panel-heading"> 
      <h4 class="panel-title"> 
      <a class="t-title" href="#notice-3">title</a> 
      <a class="t-toggle" href="#notice-3">toggle</a> 
      </h4> 
     </div> 
     <div id="notice-3" class="panel-collapse collapse"> 
      <div class="panel-body"><p>content</p><p>content</p><p>content</p></div> 
     </div> 
     </div> 
     <!--/end update --> 
    </div> 
    </div> 
</div> 
+0

你可能會得到一些幫助:

如果不想手動設置每data-toggle屬性,則可以至少使用這行。 – cfx

回答

2

你不能離開data-標記之外,作爲collapse()功能由初始化的摺疊組件,它不是一個事件觸發。如果你把它變成的jsfiddle

$('#accordion').find('.t-title, .t-toggle').attr('data-toggle', 'collapse'); 

Bootply