Bootstrap 带有悬停下拉菜单和可点击链接的导航栏

Question

我有一个带有悬停下拉菜单的 bootstrap 导航栏解决方案。是这样的：http://bootsnipp.com/snippets/E7KEy

我的问题是，我需要在导航栏中点击 link。每个下拉父级应该是 link。目前，"dropdown-toggle" class 不允许这样做。

在移动视图中，我需要一个额外的 link 来打开下拉菜单，因为父项应该保持可点击。

有什么解决方案吗？

Answer 1

在 css 文件的第 55 行更改中用此代码替换它。

.navbar-default .navbar-nav .open .dropdown-menu > li > a:click,
.navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
 background-color: #ccc;
}

Answer 2

其中一个选项是使用jQuery来显示子菜单； bootstrap 以类似的方式加载菜单。

以下是这样做的代码，对我来说效果很好：

$('ul.nav li.dropdown, li.dropdown-submenu').hover(function () {
    $('> .dropdown-menu', $(this)).stop(true, true).delay(1000).show();
    $(this).addClass('open');
}, function () {
    $('> .dropdown-menu', $(this)).stop(true, true).delay(1000).hide();
    $(this).removeClass('open');
});

Bootstrap 带有悬停下拉菜单和可点击链接的导航栏

Bootstrap navbar with hover dropdown and clickable links

css

navbar

twitter-bootstrap

twitter-bootstrap-3