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”