[英]Add active class to li and parents through jquery
我是javascript的初学者,我一直在尝试使用jquery将active
类添加到li
即当单击它时,展开li
并将其激活:
<script>
$(document).ready(function() {
var url = window.location['pathname'];
jQuery('li a').each(function() {
if($(this).attr('href') == url)
$(this).parent().addClass('active');
});
});
</script>
这只会使子菜单处于活动状态,而不会扩展。 但是,当我手动将活动类(如下所示)添加到treeview和li时,它扩展并变为活动类。 如何通过jquery动态添加active
类?
<aside class="main-sidebar">
<section class="sidebar">
<ul class="sidebar-menu" data-widget="tree">
<li class="header">MENU</li>
<li class="treeview active">
<a href="#">
<i class="fa fa-table"></i> <span>USER</span>
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li><a href="{{ url_for('add')}}"><i class="fa fa-plus"></i> Add</a></li>
<li class="treeview active">
<a href="#"><i class="fa fa-circle-o"></i> Profile
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li class="active"><a href="{{ url_for('view')}}"><i class="fa fa-circle-o"></i> View </a></li>
<li><a href="{{ url_for('settings')}}"><i class="fa fa-circle-o"></i> Settings </a></li>
</ul>
</li>
</ul>
</li>
</ul>
</section>
</aside>
因此,您需要使用父类对所有.treeview
应用active
类:
$(this).parents('.treeview').addClass('active');
实际上,将parent()
更改为parents()
解决此问题:
$(this).parents().addClass('active');
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.