引導摺疊元素 - 摺疊divs未使用

-2

我們正在將我們學院的Intranet遷移到Bootstrap模板。爲此，我們想爲我們的各個選區添加一些可摺疊的菜單。您可以查看這裏的結果：引導摺疊元素 - 摺疊divs未使用

http://www.scrippscollege.edu/intranet/index2.html

每個菜單本身（它打開和關閉）正確響應，但如何才能讓這個使用學部菜單關閉的學生之一，反之亦然？

更新後添加各自的代碼;這裏的菜單列表中的項目：

<li><a class="nav-menu" data-toggle="collapse" data-target="#menu-students" href="#">Students</a></li> 
<li><a class="nav-menu" data-toggle="collapse" data-target="#menu-faculty" href="#">Faculty</a></li> 
<li><a class="nav-menu" data-toggle="collapse" data-target="#menu-staff" href="#">Staff</a></li>

，這裏是每一個的開始DIV通過上述代碼切換：

<div id="menu-students" class="collapse clearfix hidden-phone"> 

<div id="menu-faculty" class="collapse clearfix hidden-phone"> 

<div id="menu-staff" class="collapse clearfix hidden-phone">

能手風琴方法/分類法應用於菜單系統像我們一樣？我見過的所有例子都涉及堆棧鏈接。

來源

2013-06-04 Scripps College

您應該向我們展示一段代碼，照顧菜單，並告訴我們您嘗試了什麼。 –

您可以使用jQuery隱藏其他打開的'collapse'div。喜歡的東西..

$('#menu-top-menu [data-toggle=collapse]').on('click', function (e) { 
    $('.collapse').not($(this).data("target")).collapse('hide'); 
});

來源

2013-06-04 16:32:06 ZimSystem

我認爲當問題要求'accordion-group'的原生行爲時，不需要破解手風琴的行爲。 – albertedevigo

主要問題並未真正要求原生行爲，而是要求與手風琴結構相分離的類似功能。對此答案+1。 –

這是原生的行爲預期的塌縮元件，確保你正在爲可摺疊單元的組，正確界定data-toggle，data-parent和href屬性。按照documentation中的示例進行操作：

<div class="accordion" id="accordion2"> 
    <div class="accordion-group"> 
     <div class="accordion-heading"> 
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne"> 
       Collapsible Group Item #1 
      </a> 
     </div> 
     <div id="collapseOne" class="accordion-body collapse in"> 
      <div class="accordion-inner"> 
       Anim pariatur cliche... 
      </div> 
     </div> 
    </div> 
    <div class="accordion-group"> 
     <div class="accordion-heading"> 
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo"> 
       Collapsible Group Item #2 
      </a> 
     </div> 
     <div id="collapseTwo" class="accordion-body collapse"> 
      <div class="accordion-inner"> 
       Anim pariatur cliche... 
      </div> 
     </div> 
    </div> 
</div>

來源

2013-06-04 16:36:04 albertedevigo

引導摺疊元素 - 摺疊divs未使用

回答

相關問題