Twitter Bootstrap for Rails下拉菜单不可单击

Question

直到现在，我在平板电脑和智能手机上的自举下拉菜单突然出现了一个奇怪的问题。 折叠后的（在小屏幕上）子菜单不可点击。 就像带有类dropdown-menu的ul一样，它就像一个“块”，阻塞了其中的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>

我在这里或Google找不到任何修复程序，因此希望有人知道此问题以及如何解决。 非常感谢你！

更新：我注意到，如果单击包含子菜单项的菜单项，则整个菜单将变得不可单击。 这意味着即使以前可以单击的菜单项也无法再单击。

也许突然有些东西覆盖了整个区域？

更新2感谢您的回答，但我注意到某些事情将问题引向了新的方向。 在使用twitter引导框架时，除其他外，我还使用了下拉菜单和图片滑块。 我注意到图片滑块不再移动。 这可能与第一个问题有关吗？ 我查看了git commit日志，发现bootstrap-alert.js（v2.3.1-> v2.3.2）和jQuery JavaScript Library（v.1.9.1-> v1.10.2）的版本有所变化。 我不明白为什么下拉功能仍然有效，但滑块却不可用。 这可能与此有关吗？

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

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

Answer 1

您正在寻找的是一个子菜单。

下拉菜单本质上是一个块的元素。 dropdown-menu是ul的元素，dropdown-submenu是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

Answer 2

在bootstrap.js中。 文件（或最小值），找到子字符串

“ontouchstart”

并替换为

“禁用-ontouchstart”