twitter-bootstrap 导航不切换折叠答案

【问题标题】：twitter-bootstrap nav not toggling collapsetwitter-bootstrap 导航不切换折叠
【发布时间】：2015-04-27 21:19:49
【问题描述】：

这是我使用引导程序对导航进行的标记...... 我不确定为什么当单击带有 data-target='.mynavbar' 的按钮时，带有 'mynavbar' 类的 div 没有切换打开和关闭（通过向其添加 'in' 类）（这只是在较小的屏幕上显示汉堡类型菜单而不是链接“工作，关于，联系）

另外，在大屏幕和小屏幕上，点击的 li 是否应该添加“活动”类？我也没有看到这种情况发生

    <nav class='navbar navbar-fixed-top drop-shadow'>
        <div class='container-fluid'>
            <div class='navbar-header page-scroll'>
                <button type='button' class='navbar-toggle' data-toggle='collapse' data-target='.mynavbar'>
                    <span class='icon-bar'></span>
                    <span class='icon-bar'></span>
                    <span class='icon-bar'></span>
                </button>
                <a class='navbar-brand page-scroll' href='#'><i class='glyphicon glyphicon-home'></i></a>
            </div>
            <div class='collapse navbar-collapse mynavbar'>
                <ul class='nav navbar-nav'>
                    <li><a class='page-scroll' href='#work'>Work</a></li>
                    <li><a class='page-scroll' href='#about'>About</a></li>                 
                    <li><a class='page-scroll' href='#contact'>Contact</a></li>
                </ul>
            </div>
        </div>
    </nav>

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

您需要定位到<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#mynavbar"> 中的 ID，而不是类。然后把有collapse navbar-collapse类的元素改成<div class="collapse navbar-collapse" id="mynavbar">

总的来说，这段代码应该适合你

<nav class="navbar navbar-fixed-top navbar-inverse drop-shadow" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header page-scroll">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#mynavbar">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand page-scroll" href="#">
                <i class="glyphicon glyphicon-home"></i>
            </a>
        </div>
        <div class="collapse navbar-collapse" id="mynavbar">
            <ul class="nav navbar-nav">
                <li class="active"><a class="page-scroll" href="#work">Work</a></li>
                <li><a class="page-scroll" href="#about">About</a></li>
                <li><a class="page-scroll" href="#contact">Contact</a></li>
            </ul>
        </div>
    </div>
</nav>

而且，您可以在点击时将class="active" 添加到您的<li>，这通常在服务器端或您自己的 URL 路由器中处理

【讨论】：