Question

所以我一直试图设置一个当大小低于一定像素数时折叠到下拉列表的导航栏。到目前为止，我已经设法使普通菜单在一定大小下消失，但是一旦我使窗口变小并且我有一个点击图标（<a class="navbar-toggle">）没有任何反应，好吧，如果我看一下控制台，我得到一个＆＃34; Clicked Link＆＃34;在chrome-extension dom.js的控制台上，但没有下拉菜单。知道我错过了什么吗？

这是菜单（在ejs中）

    <div class="jumbotron cm_header">
        <H1>Construct Mind - Internal</H1>
    <div class="navbar-header">
        <a class="navbar-toggle">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </a>
    </div>
        <div id="slidemenu">
            <ul class="nav navbar-nav">
                <li <%if (title == "Home") { %> class="cmh_active"<% } %>><a href="/internal">Home</a></li>
                <li <%if (title == "Whiteboard") { %> class="cmh_active"<% } %>><a href="/internal/whiteboard">Whiteboard</a></li>
                <li <%if (title == "Profile") { %> class="cmh_active"<% } %>><a href="/internal/profile"><%if (user.updateMe) { %><i class="glyphicon glyphicon-exclamation-sign" ><% } %>Profile<%if (user.updateMe) { %></i><% } %></a></li>
                <li <%if (title == "Addressbook") { %> class="cmh_active"<% } %>><a href="/internal/addressbook">Addressbook</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right login_move">
                <li><a href="/logout"><i class="fa fa-user">&nbsp; Logout</i></a></li>
            </ul>
        </div>


    </div>
    </div>
</nav>

加载CSS，并加载以下javascript库：

<link href="/bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">

... code ...


<script src="/bower_components/jquery/dist/jquery.min.js"></script>
<script src="/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="/bower_components/angular/angular.js"></script>
<script src="/bower_components/ngDialog/js/ngDialog.min.js"></script>
<script src="/javascripts/cmInternal.js"></script>

Answer 1

这已内置到bootstrap中。查看bootstrap.com的html我看到他们的按钮如下所示：

<button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#bs-navbar" aria-controls="bs-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>

使用按钮 data-target =＆＃34;＃bs-navbar＆＃34; 。＆＃34;＃BS-导航栏＆＃34;是指＆＃34; nav＆＃34;元件

<nav id="bs-navbar" class="collapse navbar-collapse">
  <ul class="nav navbar-nav">
    <li>
      <a href="../getting-started/">Getting started</a>
    </li>
    <li>
      <a href="../css/">CSS</a>
    </li>
    <li>
      <a href="../components/">Components</a>
    </li>
    <li>
      <a href="../javascript/">JavaScript</a>
    </li>
    <li>
      <a href="../customize/">Customize</a>
    </li>
  </ul>
  <ul class="nav navbar-nav navbar-right">
    <li><a href="http://expo.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');">Expo</a></li>
    <li><a href="http://blog.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');">Blog</a></li>
  </ul>
</nav>

您只需在您的情况下使用该组合即可使其发挥作用。

导航栏消失但没有下拉列表

1 个答案: