Bootstrap 3隐藏菜单项下的下拉菜单点击 [英] Bootstrap 3 Hide Dropdown Menu on Menu Item Click

问题描述

查看小提琴 。我有一个基本的Bootstrap 3响应导航，如下所示：

Check out the fiddle. I have a basic Bootstrap 3 responsive nav like so:

    <div id="navbar" class="navbar navbar-fixed-top navbar-inverse">
        <div class="container">
            <a id="navbar-toggle" class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </a>

            <a class="navbar-brand" href="#">Title Title Title</a>

            <div id="nav-collapse" class="nav-collapse collapse">
                <ul class="nav navbar-nav">
                    <li><a href="#option1">Option 1</a></li>
                    <li><a href="#option2">Option 2</a></li>
                    <li><a href="#option3">Option 3</a></li>
                </ul>
            </div>
        </div>
    </div>

导航项链接到页面上的部分，而不是不同的页面，所以我需要下拉隐藏点击。

The nav items link to sections on the page, rather than different pages so I need the dropdown to hide on click.

每当我尝试用jQuery手动切换下拉菜单时，它会混淆下拉式切换按钮的未来功能：

Whenever I try to toggle the dropdown manually with jQuery, it messes up future functionality of the dropdown toggle button:

$("#navbar li a").click(function(event) {
    // check if window is small enough so dropdown is created
    $("#navbar-toggle").is(":visible")
        $("#nav-collapse").toggle();
});

有没有更好的解决方案？

Is there a better fix for this?

推荐答案

如果您想在没有JavaScript的情况下执行此操作，可以简单地将数据目标和数据切换添加到每个列表项，如下所示：

If you wanted to do this without JavaScript you could simply add the data-target and data-toggle to each list item, like so:

<li data-toggle="collapse" data-target=".nav-collapse"><a href="#option1">Option 1</a></li>
<li data-toggle="collapse" data-target=".nav-collapse"><a href="#option2">Option 2</a></li>
<li data-toggle="collapse" data-target=".nav-collapse"><a href="#option3">Option 3</a></li>

对于导航栏，这只有在有切换按钮时才能在移动视图模式下工作。导航栏暴露时会发生奇怪的事情（切换按钮未显示）。

For the navbar, this really only works in the mobile view mode when there is a toggle button. Strange things happen when the navbar is exposed (the toggle button isn't showing).

这篇关于Bootstrap 3隐藏菜单项下的下拉菜单点击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！