Bootstrap响应Navbar的电话和其他设备 [英] Bootstrap Responsive Navbar for Phones and other devices

问题描述

这是我正在开发的网站。

This is the website I am working on.

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

它正确地堆叠，它响应，一切都很好，除了以下。

It's stacking up properly, it's responsive, everything is fine apart from the following.

当我从手机或平板电脑访问此网站时，导航栏显示3行，我点击它，所有链接显示，然后当我点击 ，它下降并显示我教师登录和学生登录，但当我点击其中之一，它切换和关闭下拉的事情。

When I visit this site from my phone or tablet, the navbar shows 3 lines, I click that and all the links show up, and then when I click the "LOGIN", it drops down and shows me Faculty Log In and Student Log In, but when I click one of these, it toggles and closes the dropdown thing.

我知道这是因为：

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

使它像一个适当的链接，通过智能手机和平板电脑上的网站浏览？所有的浏览器都有同样的问题！

But how do I fix this and make it like a proper link to navigate through the site on smartphones and tablets? All the browsers had the same problem!

我检查过Responsinator，同样的问题也出现在那里。

I checked with Responsinator and the same problem occurs there also.

谢谢

推荐答案

bootstrap-dropdown.js （在脚本末尾）的代码：

Fixed by adding (replace) this piece of code on bootstrap-dropdown.js (at the end of the script) :

$(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功能。

Basically stops the touch event on a dropdown from bubbling to the next element, which would be the HTML tag and has the clearMenus function.

这篇关于Bootstrap响应Navbar的电话和其他设备的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！