Bootstrap 菜单没有关闭

Question

我知道以前在这里问过这类问题，但他们的解决方案在这种情况下不起作用。在我的 bootstrap 网站中，当我 press/touch 菜单按钮时，它会打开。但是当我再次 press/touch 它时它不会关闭。

这是我的菜单按钮的代码：

<div class="navbar-header">
              <!-- Logo Starts -->
              <a class="navbar-brand" href="index.php"><img class="img-responsive" src="images/logo.png" alt="logo"></a>
              <!-- #Logo Ends -->

              <!--menu button for mobile view start -->
              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
              <!--#menu button for mobile view end -->
</div>

我已经完成了这些解决方案：

bootstrap-3-collapsed-menu-doesnt-close-on-click
bootstrap-collapse-component-not-closing-menu-on-clicking-away
bootstrap-close-responsive-menu-on-click
bootstrap-3-navbar-doesnt-collapse-properly

我在我的 hmtl 文件的底部附上了这两个文件：

我也试过 jquery 2.1.3 文件。那也不行。

有人可以解决这个问题吗？我真的找不到这段代码的问题所在。谢谢。

Answer 1

您需要添加 Bootstrap "CSS and JS" 家书店。还有一个 jquery 版本。 jquery 必须在 JS 库引导之前添加。这样一来，你就运行顺利了！

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<nav class="navbar navbar-default" role="navigation">
  <!-- El logotipo y el icono que despliega el menú se agrupan
       para mostrarlos mejor en los dispositivos móviles -->
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse"
            data-target=".navbar-ex1-collapse">
      <span class="sr-only">Desplegar navegación</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="#">Logotipo</a>
  </div>

  <!-- Agrupar los enlaces de navegación, los formularios y cualquier
       otro elemento que se pueda ocultar al minimizar la barra -->
  <div class="collapse navbar-collapse navbar-ex1-collapse">
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Enlace #1</a></li>
      <li><a href="#">Enlace #2</a></li>
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
          Menú #1 <b class="caret"></b>
        </a>
        <ul class="dropdown-menu">
          <li><a href="#">Acción #1</a></li>
          <li><a href="#">Acción #2</a></li>
          <li><a href="#">Acción #3</a></li>
          <li class="divider"></li>
          <li><a href="#">Acción #4</a></li>
          <li class="divider"></li>
          <li><a href="#">Acción #5</a></li>
        </ul>
      </li>
    </ul>

    <form class="navbar-form navbar-left" role="search">
      <div class="form-group">
        <input type="text" class="form-control" placeholder="Buscar">
      </div>
      <button type="submit" class="btn btn-default">Enviar</button>
    </form>

    <ul class="nav navbar-nav navbar-right">
      <li><a href="#">Enlace #3</a></li>
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
          Menú #2 <b class="caret"></b>
        </a>
        <ul class="dropdown-menu">
          <li><a href="#">Acción #1</a></li>
          <li><a href="#">Acción #2</a></li>
          <li><a href="#">Acción #3</a></li>
          <li class="divider"></li>
          <li><a href="#">Acción #4</a></li>
        </ul>
      </li>
    </ul>
  </div>
</nav>

Navbar Menu

Answer 2

好的，我必须删除导致问题的 3 个 JS 文件。现在它可以正常工作了

Bootstrap 菜单没有关闭

Bootstrap menu does not close

javascript

twitter-bootstrap

menu

collapse

jquery-mobile-collapsible