Question

如何使用彼此相邻的两个导航栏切换菜单？如果我点击第一个图标它会正常打开但是如果我点击第二个图标，第一个图标就不会关闭。

<nav class="navbar-blue" role="navigation">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header navbar-default">
                <button type="button" class="navbar-toggle navbar-user" data-toggle="collapse" data-target="#navbar-collapse-2">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>

                <button type="button" class="navbar-toggle navbar-menu" data-toggle="collapse" data-target="#navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>

                <a class="navbar-brand" href="#">
                    Logo goes here
                </a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse navbar-default" id="navbar-collapse-1">
                <ul class="nav navbar-nav client-nav navbar-right">
                    <li>
                        <a class="active" href="#">My Projects</a>
                    </li>
                    <li>
                        <a href="#">Search</a>
                    </li>
                    <li>
                        <a href="#">Post Project</a>
                    </li>
                    <li class="hidden-xs">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#"><span class="fa fa-user"></span><span class="fa fa-sort-desc"></span></a>
                        <ul class="dropdown-menu client-dropdown">
                            <li><a href="#">My Profile</a></li>
                            <li><a href="#">Account Settings</a></li>
                            <li><a href="#">Sign Out</a></li>
                        </ul>
                    </li>
                </ul>
            </div>

            <!-- User menu to show on screens < 768px -->
            <div class="collapse navbar-collapse navbar-default" id="navbar-collapse-2">
                <ul class="nav navbar-nav client-nav navbar-right">
                    <li><a href="#">My Profile</a></li>
                    <li><a href="#">Account Settings</a></li>
                    <li><a href="#">Sign Out</a></li>
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container -->
    </nav>

Answer 1

我必须将bootstrap更新到最新版本。您的演示使用3.0.0而3.3.5是最新的。无论如何，根据the documentation from bootstrap's site，您可以通过监听show.bs.collapse事件并为其他菜单触发.collapse('hide')来实现此目的。

$(function(){
    $('.navbar-blue .navbar-collapse').on('show.bs.collapse', function(e) {
        $('.navbar-blue .navbar-collapse').not(this).collapse('hide');
    });
});

Demo: Jsfiddle

Bootstrap 3 - 带有两个折叠菜单的Navbar

1 个答案: