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

【问题标题】：Make Bootstrap 3 Active Menu Stay Open使 Bootstrap 3 活动菜单保持打开状态
【发布时间】：2013-11-21 16:50:51
【问题描述】：

我在 Wordpress 中使用自定义 Bootstrap 主题。我正在为我的移动菜单使用导航栏。我有一个像这样的堆叠子菜单...https://www.dropbox.com/s/t4l0qjzno0wn42f/nav.jpg

问题在于，当单击这些子项之一时，父项会关闭。只要用户在该父项中，我希望子面板保持打开状态。有没有办法做到这一点？

【问题讨论】：

标签： twitter-bootstrap twitter-bootstrap-3 navbar

【解决方案1】：

我不是 100% 确定我理解你的问题。单击子项，应该打开一个新页面吗？在新页面上，您将保持当前项目（或其父项）处于活动状态。

1) 找到新页面的url：

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

基于：https://stackoverflow.com/a/2865546/1596547 和 https://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) 一个开放的活动父母应该有类 active 和 open 基于 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 的事件）。

【讨论】：