用于手机和其他设备的 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)
 })

基本上阻止下拉菜单上的触摸事件冒泡到下一个元素，这将是 HTML 标记并具有 clearMenus 功能。