DEMO

Question

我的bootstrap网站上的下拉列表有点麻烦。

Here

当导航栏折叠到可切换按钮并点击它时，它会正确显示下拉列表，但是当我点击链接并进入正确的部分时，下拉列表不会像我希望的那样消失

它是我的第一个引导网站，我是一个新手webdev ...所以尽管搜索引导网站...我已经空了。

非常感谢任何帮助。

亚历

Answer 1

试试这样：

将一个id设置为切换按钮，并将常用class名称设置为导航栏中的链接按钮，并写入条件比如点击链接按钮时，当导航处于折叠状态时，按钮切换也会一起点击，如下所示

DEMO

 <nav class="navbar navbar-default" role="navigation">
            <div class="container-fluid">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <button id="btnCollapse" type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-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="#">Brand</a>
                </div>

                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav">
                        <li class="active"><a class="a" href="#">Link</a></li>
                        <li><a class="a" href="#">Link</a></li>
                        <li><a class="a" href="#">Link</a></li>
                        <li><a class="a" href="#">Link</a></li>
                    </ul>
                </div>
                <!-- /.navbar-collapse -->
            </div>
            <!-- /.container-fluid -->
        </nav>

SCRIPT：

 $(".a").click(function () {
            if ($("#btnCollapse").css('display')!='none')
            $("#btnCollapse").click();
        });

bootstrap navbar按钮下拉列表不会在点击时消失

1 个答案:

DEMO