1

直到现在，我在平板电脑和智能手机上的引导下拉菜单突然出现了一个奇怪的问题。折叠的（在小屏幕上）子菜单不可点击。它就像带有类下拉菜单的 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>

我在这里或谷歌找不到任何修复，所以我希望有人知道这个问题以及如何解决它。非常感谢！

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

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

更新 2 感谢您的回答，但我注意到一些将问题指向新方向的东西。当我使用 twitter 引导框架时，我正在使用下拉菜单和图片滑块等。我注意到图片滑块不再移动。这可能与第一个问题有关吗？我查看了我的 git 提交日志，发现 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.9.1 替换 jQuery JavaScript Library v1.10.2），一切都会再次运行。但现在的问题是，当我预编译资产时，它再次将 v1.9.1 替换为 v1.10.2。

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

4

2 回答 2

1

在你的 bootstrap.js 中。文件（或分钟），找到子字符串

“ontouchstart”

并将其替换为

“禁用-ontouchstart”

于 2013-09-03T03:05:46.300 回答
1

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

下拉菜单本质上是块的元素。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

于 2013-09-02T19:37:41.357 回答