javascript - 用于手机和其他设备的 Bootstrap 响应式导航栏

Question

这是我正在处理的网站。

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

它堆叠正确， react 灵敏，除以下内容外一切正常。

当我从我的手机或平板电脑访问这个网站时，导航栏显示 3 行，我单击它并显示所有链接，然后当我单击“登录”时，它会下拉并显示 Faculty Log In 和学生登录，但是当我单击其中一个时，它会切换并关闭下拉菜单。

我知道这是由于:

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 函数。