如何在点击和悬停时应用引导类活动菜单导航栏<li> </li>

Question

<nav class="navbar-default navbar-side" role="navigation">
    <div class="sidebar-collapse">
        <ul class="nav" id="main-menu">
            <li> <a href="/control/dashboard/view"><i class="fa fa-dashboard fa-2x"></i>Dashboard</a> 
            </li>
            <li> <a href="#"><i class="glyphicon glyphicon-user fa-2x"></i>Users<span class="fa arrow"></span></a> 
                <ul class="nav nav-second-level">
                    <li> <a href="/control/adduser/add">Create New User</a> 
                    </li>
                    <li> <a href="/control/userlist/view">User List</a> 
                    </li>
                    <li> <a href="/control/Jobtitlelist/view">User Designation</a> 
                    </li>
                </ul>
            </li>
            <li> <a href="#"><i class="glyphicon glyphicon-th fa-2x"></i>Jobs<span class="fa arrow"></span></a> 
                <ul class="nav nav-second-level">
                    <li> <a href="/control/Jobtemplatelist/view">Job List</a> 
                    </li>
                </ul>
            </li>
            <li> <a href="#"><i class="fa fa-bar-chart-o fa-2x"></i>Reports<span class="fa arrow"></span></a> 
                <ul class="nav nav-second-level"></ul>
            </li>
            <li> <a href="#"><i class="glyphicon glyphicon-cog fa-2x"></i>Settings<span class="fa arrow"></span></a> 
                <ul class="nav nav-second-level">
                    <li> <a href="/control/devicelist/view">Devices</a> 
                    </li>
                    <li> <a href="/control/appsettings/view">App Settings</a> 
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</nav>

Answer 1

悬停： -

$("nav.navbar-default ul.nav li").hover(function(){
$(this).addClass("active-menu");
},
function(){
$(this).removeClass("active-menu");
});

点击： -

$("nav.navbar-default ul.nav li").click(function(){
    $(this).toggleClass("active-menu");
});

Answer 2

你可以试试这个

onViewCreated

点击试试这个

$("nav.navbar-default ul.nav li").hover(function(){
$(this).addClass("NewClass").removeClass("OldClass");
},
function(){
$(this).addClass("OldClass").removeClass("NewClass");
});