将类添加到侧边栏父菜单&点击子菜单 [英] Add class to sidebar parent menu & submenu on click
本文介绍了将类添加到侧边栏父菜单&点击子菜单的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想将类active
添加到侧边栏父级&中.单击子菜单.我已经尝试过此代码,但无法正常工作.请检查我的代码,并建议我错过的内容和地点.
I want to add class active
to sidebar parent & sub menu on click. I've tried this code, but it won't work. Please check my code and suggest me what and where I missed.
$("#sidebar-menu ul li.with_sub a.active").parents("li:last").children("a:first").addClass("active").trigger("click");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slim-sidebar" id="sidebar-menu">
<label class="sidebar-label">Navigation</label>
<ul class="nav nav-sidebar">
<li class="sidebar-nav-item with-sub">
<a href="" class="sidebar-nav-link"><i class="icon ion-ios-home-outline"></i> Dashboard</a>
<ul class="nav sidebar-nav-sub">
<li class="nav-sub-item"><a href="menuother.html" class="nav-sub-link">Page 01</a></li>
<li class="nav-sub-item"><a href="" class="nav-sub-link">Page 02</a></li>
<li class="nav-sub-item"><a href="" class="nav-sub-link">Page 03</a></li>
<li class="nav-sub-item"><a href="" class="nav-sub-link">Page 04</a></li>
<li class="nav-sub-item"><a href="" class="nav-sub-link">Page 05</a></li>
</ul>
</li>
<li class="sidebar-nav-item with-sub">
<a href="" class="sidebar-nav-link"><i class="icon ion-ios-home-outline"></i> Menu</a>
<ul class="nav sidebar-nav-sub">
<li class="nav-sub-item"><a href="" class="nav-sub-link">Menu 01</a></li>
<li class="nav-sub-item"><a href="" class="nav-sub-link">Menu 02</a></li>
<li class="nav-sub-item"><a href="" class="nav-sub-link">Menu 03</a></li>
<li class="nav-sub-item"><a href="" class="nav-sub-link">Menu 04</a></li>
<li class="nav-sub-item"><a href="" class="nav-sub-link">Menu 05</a></li>
</ul>
</li>
</ul>
</div>
推荐答案
检查以下代码,它可以正常工作
Check following code, It is working
$("#sidebar-menu ul.nav li.with-sub li a").click(function() {
$("#sidebar-menu ul.nav li.with-sub li a").removeClass("active");
$(this).addClass('active');
$("#sidebar-menu ul.nav li.with-sub a.sidebar-nav-link").removeClass("active");
$(this).parent().parent().parent().find('a.sidebar-nav-link').addClass('active');
});
#sidebar-menu li a.active {
color: black;
font-weight:bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slim-sidebar" id="sidebar-menu">
<label class="sidebar-label">Navigation</label>
<ul class="nav nav-sidebar">
<li class="sidebar-nav-item with-sub">
<a href="javaScript:void(0)" class="sidebar-nav-link"><i class="icon ion-ios-home-outline"></i> Dashboard</a>
<ul class="nav sidebar-nav-sub">
<li class="nav-sub-item"><a href="javaScript:void(0)" class="nav-sub-link">Page 01</a></li>
<li class="nav-sub-item"><a href="javaScript:void(0)" class="nav-sub-link">Page 02</a></li>
<li class="nav-sub-item"><a href="javaScript:void(0)" class="nav-sub-link">Page 03</a></li>
<li class="nav-sub-item"><a href="javaScript:void(0)" class="nav-sub-link">Page 04</a></li>
<li class="nav-sub-item"><a href="javaScript:void(0)" class="nav-sub-link">Page 05</a></li>
</ul>
</li>
<li class="sidebar-nav-item with-sub">
<a href="javaScript:void(0)" class="sidebar-nav-link"><i class="icon ion-ios-home-outline"></i> Menu</a>
<ul class="nav sidebar-nav-sub">
<li class="nav-sub-item"><a href="javaScript:void(0)" class="nav-sub-link">Menu 01</a></li>
<li class="nav-sub-item"><a href="javaScript:void(0)" class="nav-sub-link">Menu 02</a></li>
<li class="nav-sub-item"><a href="javaScript:void(0)" class="nav-sub-link">Menu 03</a></li>
<li class="nav-sub-item"><a href="javaScript:void(0)" class="nav-sub-link">Menu 04</a></li>
<li class="nav-sub-item"><a href="javaScript:void(0)" class="nav-sub-link">Menu 05</a></li>
</ul>
</li>
</ul>
</div>
这篇关于将类添加到侧边栏父菜单&点击子菜单的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文