Question

我有一个引导导航栏，切换按钮除了我的下拉链接外没有关闭任何东西，我的菜单没有被隐藏。在我实现切换按钮之前隐藏了菜单。

         <nav class="navbar navbar-default navbar-fixed-top navbar-header-full">

        <div class="header-full-title img-responsive">
            <img src="~/Content/img/MTC_logo_header.png" class="img-responsive" />
        </div>
        <div id="navbar" class="navbar-collapse">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle=".navbar-collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>

                <ul class=" nav navbar-nav navbar-right">

                    <li><a href="#" class="navStyle">OUR STORY</a></li>
                    <li><a href="#" class="navStyle">VISIT</a></li>
                    <li><a href="#" class="navStyle">DIRECTORY</a></li>
                    <li><a href="#" class="navStyle">CONDOS</a></li>
                    <li><a href="#" class="navStyle">APARTMENTS</a></li>
                    <li class="dropdown">
                        <a href="#" class="navStyle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">EVENTS</a>
                        <ul class="dropdown-menu dropDownMTC pull-right">
                            <li><a href="#">YOGA ROCKS THE PARK</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">MONDAY NIGHT MOVIES</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">HORSES OF HONOR</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">THURSDAY IN THE PARK</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">EVENT SHUTTLE</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">HOLIDAY LIGHTS FESTIVAL</a> </li>
                        </ul>
                    </li>
                    <li><a href="#" class="navStyle">NEWS</a></li>
                </ul>
            </div>
        </div>

          </nav>

Answer 1

navbar-header内有navbar-collapse。如果你按默认设置选择，这些应该是两个完全独立的div。见Navbar

工作示例代码段。

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default navbar-fixed-top">

  <div class="container-fluid">

    <div class="navbar-header">

      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>

      <a class="navbar-brand" href="#">
        <img src="http://placehold.it/25x25" />
      </a>

    </div>

    <div id="navbar" class="navbar-collapse collapse">

      <ul class=" nav navbar-nav navbar-right">
        <li><a href="#" class="navStyle">OUR STORY</a>
        </li>
        <li><a href="#" class="navStyle">VISIT</a>
        </li>
        <li><a href="#" class="navStyle">DIRECTORY</a>
        </li>
        <li><a href="#" class="navStyle">CONDOS</a>
        </li>
        <li><a href="#" class="navStyle">APARTMENTS</a>
        </li>

        <li class="dropdown">
          <a href="#" class="navStyle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">EVENTS</a>
          <ul class="dropdown-menu dropDownMTC pull-right">
            <li><a href="#">YOGA ROCKS THE PARK</a>
            </li>
            <li role="separator" class="divider"></li>
            <li><a href="#">MONDAY NIGHT MOVIES</a>
            </li>
            <li role="separator" class="divider"></li>
            <li><a href="#">HORSES OF HONOR</a>
            </li>
            <li role="separator" class="divider"></li>
            <li><a href="#">THURSDAY IN THE PARK</a>
            </li>
            <li role="separator" class="divider"></li>
            <li><a href="#">EVENT SHUTTLE</a>
            </li>
            <li role="separator" class="divider"></li>
            <li><a href="#">HOLIDAY LIGHTS FESTIVAL</a> 
            </li>
          </ul>
        </li>

        <li><a href="#" class="navStyle">NEWS</a>
        </li>

      </ul>

    </div>

  </div>

</nav>

＆＃13;

Bootstrap导航栏切换按钮未触发，菜单未隐藏

1 个答案: