Question

我正在将我的应用程序从Bootstrap 2.3.2过渡到3.3.2。我大部分时间都在工作，但我的导航栏折叠版本出现问题。当我在缩小尺寸的屏幕上（在我的手机上或通过缩小我的桌面窗口），我看到折叠菜单按钮，如果我点击它打开菜单，但再次点击它会不关闭菜单。

不与this one相同的问题，即关于点击折叠菜单中的某个项目。在我的情况下，单击标题本身并不关闭菜单，它应该是AFAIK。

我的导航栏位于复杂的一侧，但并非如此。消除一些批量，它是：

<div class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".querki-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>
      <a class="navbar-brand" href="/"><img src="/assets/images/Logo-menubar.png"></a>
    </div>

    <div class="querki-navbar-collapse navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li><a href="#.1v" id="">All Things</a></li>
        <li class="dropdown">
          <a class="dropdown-toggle" data-target="#Actions" href="#Actions" data-toggle="dropdown" role="button">Actions <b class="caret"></b></a>
          <ul class="dropdown-menu" role="menu">
            <li><a id="" href="#">Refresh</a></li>
            <li class="divider"></li>
            <li><a id="" href="#">Design a Model</a></li>
            ...
            <li class="disabled"><a>Delete All Things</a></li>
          </ul>
        </li>
        <li class="dropdown">
          <a class="dropdown-toggle" data-target="#Admin" href="#Admin" data-toggle="dropdown" role="button">Admin <b class="caret"></b></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="/admin/manageUsers" id="">Manage Users</a></li>
            ...
          </ul>
        </li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li class="dropdown">
          <a class="dropdown-toggle" data-target="#Logged in as Mark Waks" href="#Logged in as Mark Waks" data-toggle="dropdown" role="button">Logged in as Mark Waks <b class="caret"></b></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="/u/mark" id="">Your Profile</a></li>
            <li><a href="/logout" id="">Log out</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-right" role="search">
        <div class="form-group">
          <input class="search-query form-control _withGadget" type="text" placeholder="Search">
        </div>
      </form>
      <ul class="nav navbar-right">
        <li>
          <a href="#_notifications" class="_withGadget"><i class="icon-bell"></i></a>
        </li>
      </ul>
    </div>
  </div>
</div>

我有点击处理程序附加到许多单独的菜单项，但不是AFAIK到标题本身。

我使用的是jQuery 2.1.3（来自webjars），还有一个全新的Bootstrap，所以3.3.2。我要求Bootstrap下载中的所有JavaScript组件。当我尝试点击菜单关闭时，我没有在控制台上看到任何错误;它根本不会发生。奇怪的是，我很难将点击处理程序附加到.navbar-toggle（我试图进行调查） - 再一次，当我尝试时没有任何反应，这让我怀疑这涉及到。

子菜单按预期工作：如果我点击其中一个子菜单标题，然后再次单击将其关闭。所以这个问题似乎并不总是下降。

我注意到当我点击顶部菜单图标时，它立即打开，而不是像在Bootstrap网站上那样滑动打开。（以及它在我之前的2.3.2版本中所采用的方式。）此外，当它打开时，大小似乎是固定的，以前的情况并非如此：我正在为打开的菜单获取滚动条，并且试图滚动导致奇怪的不良影响。

不幸的是，由于即使是非缩小的Bootstrap.js文件也是单行文件，因此调试起来非常困难。有人对如何追求这个有任何建议吗？

ETA：有趣。附加数据：此问题出现在我的程序生成的页面上。（这是一个单页应用程序，主要是。）当我将基本相同的标签应用于我的静态登录页面时，一切正常。所以看起来这个问题与页面初始化后构建菜单有关。我是否需要通过JavaScript踢一些东西以使其正常工作？

Answer 1

没关系 - 明白了。可以这么说，这是一个版本问题：动态页面正在捡起崩溃插件的旧2.3.2版本，事情变得混乱。令我感到惊讶的是，菜单根本打开了，但是将正确的折叠版本固定到位......

折叠的Bootstrap菜单一旦打开，就不会再次关闭

1 个答案: