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

问题描述

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

 
<div class="容器"><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">选项 1</a></li><li><a href="#option2">选项 2</a></li><li><a href="#option3">选项 3</a></li>

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

每当我尝试使用 jQuery 手动切换下拉菜单时，它都会破坏下拉切换按钮的未来功能:

$("#navbar li a").click(function(event) {//检查窗口是否足够小，以便创建下拉菜单$("#navbar-toggle").is(":visible")$("#nav-collapse").toggle();});

有没有更好的解决方法?

解决方案

如果你想在没有 JavaScript 的情况下做到这一点，你可以简单地将 data-target 和 data-toggle 添加到每个列表项，如下所示:

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

对于导航栏，这实际上仅在有切换按钮的移动视图模式下才有效.当导航栏暴露时(没有显示切换按钮)会发生奇怪的事情.

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.

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?

解决方案

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屋！