Javascript 使用下拉菜单操作引导导航,以便在页面上始终显示1个下拉菜单

Javascript 使用下拉菜单操作引导导航,以便在页面上始终显示1个下拉菜单,javascript,jquery,twitter-bootstrap-3,Javascript,Jquery,Twitter Bootstrap 3,我有一个标准的Bootstrap 3.3.7导航项和两个下拉菜单。加载页面时,默认情况下应显示导航中的第一个下拉项。当将鼠标悬停在第二个下拉项上时,在第一个下拉项再次悬停之前,该项现在应该是唯一公开的下拉项。单击页面上的任何位置都不应关闭任何下拉菜单,单击下拉菜单1的名称等必须作为链接 我现在有它,所以默认情况下导航是公开的,导航会切换到悬停状态,但单击页面上的任何位置都会关闭下拉列表,我不知道如何覆盖它。还有,有没有更好的方法使第一个项目默认打开 我的代码如下所示: $document.re

我有一个标准的Bootstrap 3.3.7导航项和两个下拉菜单。加载页面时,默认情况下应显示导航中的第一个下拉项。当将鼠标悬停在第二个下拉项上时,在第一个下拉项再次悬停之前,该项现在应该是唯一公开的下拉项。单击页面上的任何位置都不应关闭任何下拉菜单,单击下拉菜单1的名称等必须作为链接

我现在有它,所以默认情况下导航是公开的,导航会切换到悬停状态,但单击页面上的任何位置都会关闭下拉列表,我不知道如何覆盖它。还有,有没有更好的方法使第一个项目默认打开

我的代码如下所示:

$document.readyfunction{ var$dropdown=$.nav li.dropdown; $dropdown.first.addClass'open'; $dropdown.hoverfunction{ 如果!$this.hassclass'open'{ $dropdown.removeClass'open'; $this.addClass'open'; } }; };
您可以防止在元素单击时关闭移除打开的类当前下拉列表时的默认操作。只需添加以下内容:

$dropdown.on('hide.bs.dropdown', function (e) {
    e.preventDefault();
})
$(".nav li.dropdown ul.dropdown-menu").on('click', function (e) {
    $(this).closest('li.dropdown').toggleClass('open forceclose');
})
如果当前下拉列表中有类forceclose,则避免将open类添加到该下拉列表中

$.nav li.下拉列表.在“鼠标指针”上,函数e{ 如果!$this.hassclass'open'{ $.nav li.dropdown.removeClass'open'; 如果$this.is'.forceclose'{ $this.removeClass'forceclose'; }否则{ $this.addClass'open'; } } }.on'hide.bs.dropdown',函数e{ e、 防止违约; }.1.addClass'open'; $.nav li.dropdown ul.dropdown menu.“单击”时,函数e{ $this.最近的'li.下拉列表'。切换类'open-forceclose'; }
谢谢我想如果我试图阻止hide.bs.dropdown事件,它会破坏下拉功能,但我想,由于我通过其他方式添加类来绕过它,这是最合乎逻辑的方法。