Question

我想在单击子菜单时更改菜单类处于活动状态。但我的代码所做的就是设置激活默认的活动菜单。

$('#menu1').find('li').click(function(){
   //removing the previous selected menu state
   $('#menu1').find('li').removeClass('active');

    //is this element from the second level menu?
    if($(this).closest('ul').hasClass('second-level')){
         $(this).parents('li').addClass('active');

    //this is a parent element
    }else{
         $(this).addClass('active');
    }
});

所以例如

<ul id="menu1" class="nav navbar-nav">
    <li class="active" > <a href="{{URL::to('/')}}">{{ Lang::get('messages.home') }}</a></li>
<li class='dropdown '>
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                        {{ Lang::get('messages.vehicles') }}
                        <b class="caret"></b>
                    </a> 
                    <ul id = "second-level" class="dropdown-menu">
                        <li> <a href="form-general.html">{{link_to_action('MaintenanceController@vehicle_maintenance', 
                            Lang::get('messages.vehicle_maintenance'),null)}}</a></li>
                    </ul>
                </li>

单击第二级子菜单活动类在页面刷新后设置为主菜单（默认活动meanu）。如何设置子菜单的菜单？

Answer 1

您可以将菜单项链接中的网址与网页加载时的当前网址进行比较：

$(document).ready(function() {
    $('#menu1 li').each(function() {
        if (location.href.indexOf($('a',this).attr('href'))>=0) {
            $(this).addClass('active');
        } else {
            $(this).removeClass('active');
        };
    });
});

但是，最好自己添加课程或使用服务器端代码（取决于您的网站的生成方式）。

更改菜单类活动

1 个答案: