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

用于电话和其他设备的Bootstrap Responsive Navbar

1 个答案: