Question

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

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

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

Answer 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路由器中处理

twitter-bootstrap导航没有切换崩溃

1 个答案: