首页 文章

twitter-bootstrap导航没有切换崩溃

提问于
浏览 次
0

这是我使用bootstrap导航的标记....我不知道为什么带有'mynavbar'类的div没有切换打开和关闭（通过向它添加'in'类）当带有数据的按钮时-target =' . mynavbar'被点击（这只是在汉堡包类型菜单显示的较小屏幕上而不是链接“work，about，contact）

另外，在大屏幕和小屏幕上，点击的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>
javascript jquery html

1 回答

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

    回复于

相关问题