Bootstrap折叠菜单不起作用

Question

我刚刚安装了bootstrap 3，但是折叠菜单不起作用。 该菜单在桌面屏幕上看起来不错，但按菜单按钮缩小孔的内容没有显示。

这是菜单的代码：

<div id="menu">
<div class="navbar navbar-static-top" role="navigation">
  <div class="container">
  <a class="btn btn-navbar" data-toggle="collapse" data-target="#nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>

    <a class="navbar-brand" href="/"><img class="top-logo" src="img/hotels.nl_.jpg" alt="Hotels.nl"></a>
    <div id=".nav-collapse">
        <ul class="nav navbar-nav pull-right">

    <li class="active"><a href="#">Inloggen <span class="sr-only">(current)</span></a></li>
    <li><a href="#">Contact</a></li>
    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Taal <span class="caret"></span></a>
      <ul class="dropdown-menu">
        <li><a href="#">Nederlands</a></li>
        <li><a href="#">English</a></li>
        <li><a href="#">German</a></li>
      </ul>
    </li>
    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Valuta<span class="caret"></span></a>
      <ul class="dropdown-menu">
        <li><a href="#">Euro</a></li>
        <li><a href="#">Dollar</a></li>
        <li><a href="#">Pond</a></li>
      </ul>
    </li>
  </ul>
    </div>
  </div>
  </div><!--End container-->
</div><!--End fixedtop-->

Answer 1

假设您已经放入了jquery库，并且在放入了bootstrap的js文件之后，我可以认为问题出在数据目标上。

您以id为“ nav-collapse”的元素为目标，并且以id为“ .nav-collapse”，因此需要删除该点。

<div id="menu">
<div class="navbar navbar-static-top" role="navigation">
  <div class="container">
  <a class="btn btn-navbar" data-toggle="collapse" data-target="#nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>

    <a class="navbar-brand" href="/"><img class="top-logo" src="img/hotels.nl_.jpg" alt="Hotels.nl"></a>
    <div id="nav-collapse">
        <ul class="nav navbar-nav pull-right">

    <li class="active"><a href="#">Inloggen <span class="sr-only">(current)</span></a></li>
    <li><a href="#">Contact</a></li>
    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Taal <span class="caret"></span></a>
      <ul class="dropdown-menu">
        <li><a href="#">Nederlands</a></li>
        <li><a href="#">English</a></li>
        <li><a href="#">German</a></li>
      </ul>
    </li>
    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Valuta<span class="caret"></span></a>
      <ul class="dropdown-menu">
        <li><a href="#">Euro</a></li>
        <li><a href="#">Dollar</a></li>
        <li><a href="#">Pond</a></li>
      </ul>
    </li>
  </ul>
    </div>
  </div>
  </div><!--End container-->
</div><!--End fixedtop-->

这是一个小提琴 ，我更改了一些类和某些内容以使菜单可见。 因为如果您没有合适的CSS，它就很像这样。

并且请注意，您应该始终参考bootstrap docs，并尝试坚持使用他们的方法来使菜单或其他任何东西都能正常工作。

而且我看到您已经为菜单添加了“向右拉”类，有一个名为“ navbar-right”的类比将菜单拉到我认为的右侧效果更好。