Question

当我最小化视口视图时，导航菜单应该隐藏在汉堡包移动按钮中。但是当我按它时它不会打开。

https://jsfiddle.net/xbemtom0/2/#&togetherjs=hG4m0jSANh

    <button type="button" class="navbar-toggle collapsed navbar-hamburger"
    data-toggle="collapse"
    data-target="#collapsemenu"
    >

 <div class="row collapse navbar-collapse" id="collapsemenu">
<ul class="nav navbar-nav">
<li><a href="#">Home</a></li>
<li ><a href="#">Mission</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Staff</a></li>
<li><a href="#">Testimonials</a></li>
</ul> </div>

Answer 1

确保按此顺序链接Jquery和Bootstrap js。

    <nav class="navbar navbar-inverse navbar-static-top" role="navigation">
                <div class="container">
             <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav">
                      <li><a href="#">Home</a></li>
                      <li><a href="#">Mission</a></li>
                      <li><a href="#">Services</a></li>
                      <li><a href="#">Staff</a></li>
                      <li><a href="#">Testimonials</a></li>
                    </ul>
                </div>
            </nav>

Answer 2

我认为JS文件的加载顺序错误。引导JS可以运行jQuery。

汉堡菜单没有打开

2 个答案: