汉堡菜单打不开

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 文件的加载顺序错误。 jQuery 需要 bootstrap JS 才能工作。

汉堡菜单打不开

Hamburger menu is not opening

css

navigation

twitter-bootstrap