適用於電話和其他設備的Bootstrap響應式導航欄

Question

這是我正在工作的網站。

http://ankursinha.net/TestSite/index.php

它堆疊正確，具有響應能力，除以下各項外，其他一切都很好。

當我通過手機或平板電腦訪問此網站時，導航欄顯示3行，單擊該鏈接，所有鏈接都會顯示，然后單擊“登錄”時，它會下拉並顯示“教師登錄”和“學生登錄” ，但是當我單擊其中之一時，它會切換並關閉下拉菜單。

我知道發生這種情況的原因是：

data-toggle="collapse" data-target=".nav-collapse"

但是，如何解決此問題並使其成為一個適當的鏈接，以在智能手機和平板電腦上瀏覽該網站？ 所有的瀏覽器都有相同的問題！

我與Responsinator核對過，同樣的問題也在那兒發生。

謝謝

Answer 1

通過在bootstrap-dropdown.js上 （在腳本末尾）添加（替換）這段代碼來解決：

$(function () {
  $('html').on('click.dropdown.data-api', clearMenus)
  $('body').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)
 })

基本上停止了從冒泡到下一個元素的下拉列表中的touch事件，該元素將是HTML標記並具有clearMenus函數。