引导嵌套Navbars - 控制“活动”类 [英] Bootstrap Nested Navbars - control over "active" class
问题描述
我几乎有一个嵌套的Bootstrap菜单工作正如我想要的。
I have almost got a nested Bootstrap menu working exactly as I want it.
>
菜单分为两个层次。顶部是主菜单类别，底部子类别。选择主菜单将使该菜单标题活动并打开相应的子类别，此时没有选择子类别。当用户选择子类别[例如，他们选择下面的关于2]时，则选择该菜单元素。
The menu is on two levels. The top are major menu categories, the bottom sub-categories. Selecting a major menu will turn that menu heading active and open up the appropriate sub-category, with no subcategory selected at this time. When the user selects a sub-category [for example, they select About 2 below] then that menu element is selected.
我的问题是，当用户这样做时，主类别元素被取消选择，我不想要它。
My problem is that when a user does this the major category element is de-selected and I do not want it to be.
我有JQuery代码，我认为我可以用来控制完全添加和删除活动类，但是Bootstrap似乎是这样做的。
I have JQuery code that I think I can use to control completely adding and removing the active class, however Bootstrap seems to be doing this form me.
请参阅我的小提琴。。
//get parent click menu
$('.parentMenu li a').click(function() {
//compute the tag for the elment that was selected
sel = $(this)[0].toString();
lgt = sel.length;
tag = sel.substring(lgt - 3,lgt);
tt = $(".childMenu").removeClass("show");
$(this).addClass('active');
var subMenu = $(tag + "S");
subMenu.addClass("show");
})
$('.parentMenu').click(function() {
//$(".nav").find(".active").removeClass("active");
})
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">Multi-Layer Menu</a>
<ul class="nav navbar-nav pull-left">
<li class="active"><a href="#T1">Home</a></li>
</ul>
</div>
<div class="collapse navbar-collapse parentMenu">
<ul class="nav navbar-nav">
<li><a href="#T1">Sub Menu 1</a></li>
<li><a href="#T2">Sub Menu 2</a></li>
<li><a href="#T3">Sub Menu 3</a></li>
<li><a href="#T4">Sub Menu 4</a></li>
</ul>
</div>
<div id="T1S" class="collapse childMenu">
<ul class="nav navbar-nav">
<li><a href="#">Home 1</a></li>
<li><a href="#about">About 1</a></li>
<li><a href="#contact">Contact 1</a></li>
</ul>
</div>
<div id="T2S" class="collapse childMenu">
<ul class="nav navbar-nav">
<li><a href="#">Home 2</a></li>
<li><a href="#about">About 2</a></li>
<li><a href="#contact">Contact 2</a></li>
</ul>
</div>
<div id="T3S" class="collapse childMenu">
<ul class="nav navbar-nav">
<li><a href="#">Home 3</a></li>
<li><a href="#about">About 3</a></li>
<li><a href="#contact">Contact 3</a></li>
</ul>
</div>
<div id="T4S" class="collapse childMenu">
<ul class="nav navbar-nav">
<li><a href="#">Home 4</a></li>
<li><a href="#about">About 4</a></li>
<li><a href="#contact">Contact 4</a></li>
</ul>
</div>
</div>
</div>
推荐答案
UPDATE 。我完全重写了脚本并添加了一个小CSS。
UPDATE. I completely rewrote the script and added a small CSS.
-
当用户选择子类别时，主类别元素失去焦点，而不是活动类。因此，您可以添加一个简单的css属性以将此活动元素以白色着色。
When the user selects a sub-category, the major category element loses the focus, but not the active class. So you can add one simple css-property to color this active element in white.
我注意到一个错误。父菜单的元素可以获得 .active 类，但不会丢失它。
I noticed a bug. The element of the parent menu may to get the .active class, but never loses it.
我更喜欢将 .active 类分配给< li> 标记而不是 < a>
I prefer to assign the .active class to the <li> tag instead of the <a>.
请检查结果： https://jsfiddle.net/glebkema/kz93pmvo/
// get parent click menu
$('.parentMenu li a').click(function() {
// compute the tag for the element that was selected
tag = $(this).attr('href') + 'S';
// show the child menu
selectChildMenu = $(tag);
if( !selectChildMenu.hasClass( 'show' ) ){
$( '.childMenu.show' ).removeClass( 'show' );
selectChildMenu.addClass( 'show' );
}
// add the `active` class to the element of the parent menu
if ( !$(this).parent().hasClass('active') ){
$('.parentMenu .active').removeClass('active');
$('.navbar-header .active').removeClass('active');
$(this).parent().addClass('active');
}
})
@import url('https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css');
.navbar-header .active,
.parentMenu .active {
color: white !important;
}
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">Multi-Layer Menu</a>
<ul class="nav navbar-nav pull-left">
<li><a class="active" href="#T1">Home</a></li>
</ul>
</div>
<div class="collapse navbar-collapse parentMenu">
<ul class="nav navbar-nav">
<li><a href="#T1">Sub Menu 1</a></li>
<li><a href="#T2">Sub Menu 2</a></li>
<li><a href="#T3">Sub Menu 3</a></li>
<li><a href="#T4">Sub Menu 4</a></li>
</ul>
</div>
<div id="T1S" class="collapse childMenu">
<ul class="nav navbar-nav">
<li><a href="#">Home 1</a></li>
<li><a href="#about">About 1</a></li>
<li><a href="#contact">Contact 1</a></li>
</ul>
</div>
<div id="T2S" class="collapse childMenu">
<ul class="nav navbar-nav">
<li><a href="#">Home 2</a></li>
<li><a href="#about">About 2</a></li>
<li><a href="#contact">Contact 2</a></li>
</ul>
</div>
<div id="T3S" class="collapse childMenu">
<ul class="nav navbar-nav">
<li><a href="#">Home 3</a></li>
<li><a href="#about">About 3</a></li>
<li><a href="#contact">Contact 3</a></li>
</ul>
</div>
<div id="T4S" class="collapse childMenu">
<ul class="nav navbar-nav">
<li><a href="#">Home 4</a></li>
<li><a href="#about">About 4</a></li>
<li><a href="#contact">Contact 4</a></li>
</ul>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
这篇关于引导嵌套Navbars - 控制“活动”类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
