javascript - Twitter Bootstrap for Rails 下拉菜单不可点击

Question

到目前为止，我在平板电脑和智能手机上使用的 Bootstrap 下拉菜单突然出现了一个奇怪的问题。折叠的(在小屏幕上)子菜单不可点击。它就像带有类下拉菜单的 ul 就像一个“ block ”，将 li 元素挡在其中并使它们无法点击。当我在小型设备上“长按”li 元素时，我无法选择它们。当我“快速单击”它们时，就像 ul 元素覆盖的区域以灰色闪烁一毫秒，显示被覆盖的区域。

我不确定是什么原因造成的。菜单在笔记本电脑上没有任何问题，即使我调整浏览器窗口的大小直到菜单折叠，我仍然可以将鼠标悬停在 li 元素上，以便它们获得“悬停效果”。

这是我的页面的骨架，直到菜单的第一个 li 元素，也许我在这里不小心弄坏了什么？据我了解，javascript 应该没问题，否则菜单根本打不开，对吧？

    <!-- MENU -->
    <div class="row">
      <div class="navbar span10 offset1">
        <div class="navbar-inner">
          <div class="container">
            <a class="btn btn-navbar" data-target=".nav-collapse" data-toggle="collapse">
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </a>
            <div class="nav-collapse collapse">
              <ul class="nav">
                <%= nav_link("Home", home_path) %>

                <li class="dropdown <%= "active" if params[:controller] == "courses" || params[:controller] == "enrolments" %>">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Courses <b class="caret"></b></a>
                  <ul class="dropdown-menu">  <-- blocking element?
                    <li><%= link_to "Overview", courses_path %></li>

我无法在这里或在谷歌上找到任何解决方法，所以我希望有人知道这个问题以及如何解决它。 非常感谢!

更新:我注意到如果我单击包含子菜单项的菜单项，整个菜单将无法单击。这意味着即使是以前可点击的菜单项也不能再点击了。

会不会有什么东西突然覆盖了整个区域？

更新 2 感谢您的回答，但我注意到一些事情将问题指向了一个新的方向。当我使用 twitter bootstrap 框架时，我使用的是下拉菜单和图片 slider 等。我注意到图片 slider 不再移动了。这可能与第一个问题有关吗？我查看了我的 git 提交日志，发现 bootstrap-alert.js(v2.3.1 -> v2.3.2)和 jQuery JavaScript 库(v.1.9.1 -> v1.10.2)版本发生了变化。我不明白为什么下拉功能仍然存在但 slider 不存在。这可能与此有关吗？

更新 3 事实证明，如果我替换 public/assets 文件夹中的 application.js 文件(将 jQuery JavaScript Library v1.10.2 替换为 jQuery JavaScript Library v1.9.1)，一切都会恢复正常。但现在的问题是，当我预编译 Assets 时，它再次将 v1.9.1 替换为 v1.10.2。

版本 1.10.2 在哪里定义？我认为这可以帮助很多遇到同样问题的人。

Answer 1

您正在寻找的是子菜单。

dropdown 本质上是一个 block 的元素。 dropdown-menu 是 ul 的元素，dropdown-submenu 是 li 的元素，用于在下拉菜单中创建子菜单。

因此将 li 的类从下拉菜单更改为下拉子菜单。这将为下拉菜单调用 javascript 组件以呈现正确的行为。

        <div class="nav-collapse collapse">
          <ul class="nav">
            <%= nav_link("Home", home_path) %>

            <li class="dropdown-submenu <%= "active" if params[:controller] == "courses" || params[:controller] == "enrolments" %>">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Courses <b class="caret"></b></a>
              <ul class="dropdown-menu">  <-- blocking element?
                <li><%= link_to "Overview", courses_path %></li>

您必须设置元素的样式，默认情况下它使用标准的蓝色突出显示。查看子菜单部分了解更多信息:http://getbootstrap.com/2.3.2/components.html#dropdowns