Bootstrap v2 下拉導航無法在移動瀏覽器上執行

問題描述

我在移動裝置 (Bootstrap 2) 上的 Bootstrap 選單下拉選單中出現問題。有一個類似的問題是 here 有下拉式按鈕，但是這個答案是載入程式中的一個固有的錯誤，在更新中解決了。我似乎有同樣的問題，所以也許是因為我的標記？

我有一個可摺疊的導航欄與下拉式清單，一切都在桌面瀏覽器上完美地工作。但是，在移動裝置上，當您點選下拉式清單時，下拉式清單將會開啟，但點選任何下拉鍊接將只會將下拉式清單重新上傳 – 無法連線。我已經嘗試過各種引導版本，無法糾正這一點，所以我只能想象它是我的標記。這裡是：

 <header class="navbar">
    <div class="navbar-inner">
        <div class="container">
            <a href="#"><h1>Branding</h1></a>
            <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> Menu </button>
            <div class="nav-collapse collapse">
                <ul class="nav">
                    <li><a href="#">Menu Item 1</a></li>
                    <li class="dropdown">                    
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu Item 2 (Dropdown)<b class="caret"></b></a>      
                        <ul class="dropdown-menu">
                            <li><a href="#">Dropdown Item 1</a></li>
                            <li><a href="#">Dropdown Item 2</a></li>
                            <li><a href="#">Dropdown Item 3</a></li>  
                            <li><a href="#">Dropdown Item 4</a></li>                           
                        </ul>
                    </li>
                    <li><a href="#">Menu Item 3</a></li>
                    <li><a href="#">Menu Item 4</a></li>
                </ul>
            </div><!--/.nav-collapse -->
        </div>
    </div>
</header>

這是一個複製程式碼的例子 (對不起，不能傳送站點)：http://jsfiddle.net/yDjw8/1/

(問題只能在手機上看到/複製 – 我在使用 iOS)

任何幫助將不勝感激。

最佳解決方法

在您的最小化的 bootstrap.min.js 檔案中，找到子字串

"ontouchstart"

並替換它

"disable-ontouchstart"

看看這個類似的 SO 問題：Bootstrap Collapsed Menu Links Not Working on Mobile Devices

次佳解決方法

找到 2.3.2 版本的修復程式：

<script>
jQuery(document).ready(function($)  {
$("li.dropdown a").click(function(e){
    $(this).next('ul.dropdown-menu').css("display", "block");
    e.stopPropagation();
  });
}); </script>

在我建立的兩個獨立的導航系統上工作。

第三種解決方法

我正在使用 BootStrap 3.1.1 。我已經嘗試了許多答案，下載選單在 Android 裝置上工作正常，但在 iOS 裝置上仍然無法使用。最後我發現問題的根本原因。

iPhone 上的 safari 只支援<a> 和<input> 元素的點選事件。見這段經文 Click event delegation on the iPhone 。

所以我們需要新增自定義點選委託。以下程式碼將解決問題。

$('[data-toggle=dropdown]').each(function() {
 this.addEventListener('click', function() {}, false);
});

第四種方法

我解決了同樣的問題：

開啟你的 js/bootstrap-dropdown.js 或它的最小版本。

2. 找到以下行或地點：touchstart.dropdown.data-api

應該只有 4 次發生。這樣的事情

.on('click.dropdown.data-api touchstart.dropdown.data-api', clearMenus)
.on('click.dropdown touchstart.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() })
.on('click.dropdown.data-api touchstart.dropdown.data-api'  , toggle, Dropdown.prototype.toggle)
.on('keydown.dropdown.data-api touchstart.dropdown.data-api', toggle + ', [role=menu]' , Dropdown.prototype.keydown)

你應該在第二和第三次發生之間插入這條新線：

.on('touchstart.dropdown.data-api', '.dropdown-menu', function (e) { e.stopPropagation() })

你的新聞片段必須是這樣的：

.on('click.dropdown.data-api touchstart.dropdown.data-api', clearMenus)
.on('click.dropdown touchstart.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() })
.on('touchstart.dropdown.data-api', '.dropdown-menu', function (e) { e.stopPropagation() })
.on('click.dropdown.data-api touchstart.dropdown.data-api'  , toggle, Dropdown.prototype.toggle)
.on('keydown.dropdown.data-api touchstart.dropdown.data-api', toggle + ', [role=menu]' , Dropdown.prototype.keydown)

在 Bootstrap.js 的最小化版本上要小心，所以您必須將新行連線到其上的確切位置。

祝你好運！ 🙂

第五種方法

我推薦下載最新的 Bootstrap 檔案，並使用新版本替換伺服器上的 bootstrap.js 和 bootstrap.min.js 。

這解決了我的問題。

第六種方法

我從 bootstrap git-hub 論壇找到了解決方案。您需要在指令碼中僅包含一行程式碼準備好，

$(‘body’).on(‘touchstart.dropdown’，’.dropdown-menu’，function(e){e.stopPropagation();});

它為我工作！

第七種方法

這似乎沒有任何問題。 “open” 類已經存在引導，應該工作，但由於某種原因，它不是。此程式碼強制它相應地執行。 🙂

    jQuery(document).ready(function($) {
    $("li.dropdown").click(function(e){
        $(this).toggleClass("open");
        });
    });

參考文獻

Bootstrap v2 Dropdown Navigation not working on Mobile Browsers

注：本文內容整合自 Google/Baidu/Bing 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。

Bootstrap v2 下拉導航無法在移動瀏覽器上執行