Question

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

我的问题是，我需要导航栏中的可点击链接。每个下拉列表父项都应该是一个链接。目前，“下拉 - 切换”课程不允许这样做。

在移动视图中，我需要一个额外的链接来打开下拉列表，因为父项应保持可点击状态。

对解决方案有什么想法吗？

Answer 1

在第55行的css文件中，将此替换为此代码。

.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来显示子菜单;以类似的方式引导程序如何加载菜单。

以下是执行此操作的代码，它对我来说非常有用：

$('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导航栏

2 个答案: