-2

大学のイントラネットを Bootstrap テンプレートに移行しています。そうすることで、さまざまな構成員にいくつかの折りたたみ可能なメニューを追加したいと考えました。ここで結果を表示できます。

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">

アコーディオン方式/分類法は、私たちのようなメニューシステムに適用できますか? 私が見たすべての例には、積み重ねられたリンクが含まれています。

4

2 に答える 2

1

jQuery を使用して、他の開いている「折りたたみ」div を非表示にすることができます。何かのようなもの..

$('#menu-top-menu [data-toggle=collapse]').on('click', function (e) {
   $('.collapse').not($(this).data("target")).collapse('hide');
});
于 2013-06-04T16:32:06.050 に答える