0

オーケー、それではまず、ここに私のサイトがあります: http://songfreek.com

サイトが読み込まれると、「ユーザー」メニューが開き、残りは閉じられます。ここで、別のメニュー (「ラジオ DJ」タブとしましょう) を開くと、「ユーザー」メニューと「ラジオ DJ」メニューの両方が開きます。

「Radio DJ」メニューをクリックすると、「User」メニューが閉じるようにしたいと思います。

「User」メニューから「Radio DJ」メニューへの私のコードは次のとおりです。

                        <!-- USER -->
                        <li class="nav-header">
                            <a href="#" data-toggle="collapse" data-target="#userMenu">
                                <font color="#333333">User</font> <i class="icon-angle-down"></i>
                            </a>
                            <ul style="list-style: none;" class="collapse in" id="userMenu">
                                <li class="active"><a href="#"><i class="icon-home"></i> Home</a></li>
                                <li><a href="#"><i class="icon-envelope-alt"></i> Messages <span class="badge badge-info">4</span></a></li>
                                <li><a href="#"><i class="icon-cogs"></i> Settings</a></li>
                                <li><a href="#"><i class="icon-comment"></i> Shoutbox</a></li>
                                <li><a href="#"><i class="icon-user"></i> Staff List</a></li>
                                <li><a href="#"><i class="icon-flag"></i> My Infractions</a></li>
                                <li><a href="#"><i class="icon-exclamation-sign"></i> Rules &amp; Regulations</a></li>
                                <li><a href="#"><i class="icon-off"></i> Logout</a></li>
                            </ul>
                        </li>

                        <!-- RADIO DJ -->
                        <li class="nav-header">
                            <a href="#" data-toggle="collapse" data-target="#radioDJMenu">
                                <font color="#34CCFF">Radio DJ</font> <i class="icon-angle-down"></i>
                            </a>
                            <ul style="list-style: none;" class="collapse" id="radioDJMenu">
                                <li><a href="#">Information &amp; Stats</a></li>
                                <li><a href="#">DJ Says</a></li>
                                <li><a href="#">Request Line</a></li>
                                <li><a href="#">Timetable</a></li>
                                <li><a href="#">Banned Songs</a></li>
                            </ul>
                        </li>
4

1 に答える 1

0

OK、songfreek.com で 3 対 3 にしよう...

collapse次のように「show」イベントに関数を割り当てることで、他の開いているメニューを閉じることができます。

    $('.collapse').on('show', function (e) {

        // hide open menus
        $('.collapse').each(function(){
          if ($(this).hasClass('in')) {
              $(this).collapse('toggle');
          }
        });
    })

いずれかのメニューが開かれると、'show' イベントがトリガーされます。開いている他のメニューにはinクラスが含まれているため、collapse('toggle')それらを閉じるために使用できます。

これを示すために、 http: //bootply.com/61710 の Bootply を更新しました。

于 2013-05-19T16:32:07.040 に答える