2014-09-02 187 views
2

我正在使用Bootstrap 3和移动第一种方法做一个固定的顶部导航栏。Bootstrap 3固定顶部导航栏显示水平滚动

当我在大屏幕上查看时遇到问题(例如,菜单未折叠)和我点击其中一个菜单链接,菜单上出现水平滚动。

这个问题似乎是发生在我加入data-toggle="collapse" data-target=".navbar-collapse"后的导航栏,可折叠div或还我手机中的视图中点击链接时,用锚链接也试了一下,为了增加自动关闭(小屏幕)。

当我用它作为移动视图(小显示屏)时,它可以很好地工作,并在点击我需要的链接时自动关闭。

一个例子保存在this plunker,你可以看到。

任何人都可以帮助如何删除该滚动吗?

+1

我会说你不应该像这样添加'data-toggle =“collapse”data-target =“。navbar-collapse”'而应该添加一个自定义的点击处理程序。 – cvrebert 2014-09-02 23:17:31

+0

http://stackoverflow.com/questions/21203111/bootstrap-3-collapsed-menu-doesnt-close-on-click – Christina 2014-09-03 06:34:14

回答

2

感谢您的反馈。

为@cvrebert说,我删除data-toggle="collapse" data-target=".navbar-collapse,而是我已经添加了以下JS:

$(document).on('click.nav', '.navbar-collapse', function (e) { if ($(".navbar-header button").is(":visible")) { $(this).collapse('hide'); } });

这将检查菜单按钮可见或不可见,如果可见它将关闭菜单。

谢谢。

相关问题