Bootstrap嵌套导航栏 – 控制“活动”类
我几乎得到了一个嵌套的Bootstrap菜单，正如我想要的那样。
菜单分为两个级别。 顶部是主要菜单类别，底部子类别。 选择主菜单将使该菜单标题处于活动状态并打开相应的子类别，此时未选择子类别。 当用户选择子类别[例如，他们选择下面的约2]时，则选择该菜单元素。
我的问题是当用户这样做时，主要的类别元素被取消选择，我不希望它。
我有JQuery代码，我认为我可以用它来控制完全添加和删除活动类，但Bootstrap似乎正在这样做我。
请看我的小提琴。 。
//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"); })
更新 。 我完全重写了脚本并添加了一个小CSS。
-
当用户选择子类别时，主要类别元素将失去焦点，但不会失去活动类。 因此，您可以添加一个简单的css-property来为白色的活动元素着色。
-
我注意到了一个bug。 父菜单的元素可能会获得
.active类，但永远不会丢失它。 -
我更喜欢将
.active类分配给
请检查结果： 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; }