使Bootstrap 3活动菜单保持打开状态

时间:2013-11-20 21:20:38

标签: twitter-bootstrap twitter-bootstrap-3 navbar

我正在使用Wordpress自定义Bootstrap主题。我正在使用NavBar进行移动菜单。我有一个堆叠的子菜单,如... https://www.dropbox.com/s/t4l0qjzno0wn42f/nav.jpg

问题在于,当单击其中一个子项时,父项将关闭。只要用户在父项内,我希望子面板保持打开状态。有没有办法做到这一点?

1 个答案:

答案 0 :(得分:0)

我不是100%确定我理解你的问题。 单击子项,是否应该打开新页面?在新页面上,您将保持当前项目处于活动状态(或其父项)。

1)找到新页面的网址:

$(location).attr('href').substring($(location).attr('href').lastIndexOf('/') + 1);

基于:https://stackoverflow.com/a/2865546/1596547https://stackoverflow.com/a/1991638/1596547

2)在此之后找到您的子项目,其中包含来自1)的URL的链接:

$('li.dropdown ul.dropdown-menu li a[href="' + $(location).attr('href').substring($(location).attr('href').lastIndexOf('/') + 1) +'"]')

3)一个开放的活跃父母应该有类activeopen基于2)添加这些类:

$(function(){
if($link = $('li.dropdown ul.dropdown-menu li a[href="' + $(location).attr('href').substring($(location).attr('href').lastIndexOf('/') + 1) +'"]'))
{
$link.closest('.dropdown').addClass('active open');
}
 });

注意折叠菜单会删除所有open个类。对于您的移动版本,您应该在崩溃后添加open课程(请参阅:http://getbootstrap.com/javascript/#collapse-usage处的活动)。