我正在开发一个小应用程序,它有一个 TreeView 菜单,所以这是 html:
<ul class="sidebar-menu">
<li class="active"><a href="javascript:;"> ELEMENT 1 </a></li>
<li class="treeview">
<a href="javascript:;"> ELEMENT 2 <span class="pull-right-container"><i class="fa fa-angle-left pull-right"></i></span></a>
<ul class="treeview-menu">
<li><a href="javascript:;"> ELEMENT 2.1 </a></li>
<li><a href="javascript:;"> ELEMENT 2.2 </a></li>
</ul>
</li>
<li><a href="javascript:;"> ELEMENT 3 </a></li>
</ul>
我试图突出显示单击的 li 元素,并向其添加 .active
类。但是,当您单击子元素时,我还想突出显示父元素。例如,如果您单击 ELEMENT 2.1
,我还想突出显示 ELEMENT 2
。
这是我要获取的 jQuery 代码,首先是单击的元素,然后是 li 父元素(由于其他原因,如果没有 :not
选择器,我就无法执行 ir 操作:
$(".sidebar-menu").on("click", "li:not(.treeview)", function(e){
$(e.delegateTarget).parents("li").first();
}
if 语句按预期工作,但第二行总是在控制台中给出 undefined
错误。
最佳答案
<强> Working Fiddle 。
您可以使用引用当前单击元素的 jQuery 对象 $(this)
,然后使用 addClss()
添加类事件类:
$(this).parents('li').addClass('active');
注意:您必须使用 $('li').removeClass('active');
从所有其他 li 中删除 active 类。
希望这有帮助。
$(".sidebar-menu").on("click", "li:not(.treeview)", function(e){
//remove active class from all the other li's
$('li').removeClass('active');
$(this).addClass('active'); //add active class to the clicked li
//Add active class to the parent if exist
if( $(this).parents('li').length > 0)
$(this).parents('li').addClass('active');
})
.active{
background-color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="sidebar-menu">
<li class="active"><a href="javascript:;"> ELEMENT 1 </a></li>
<li class="treeview">
<a href="javascript:;"> ELEMENT 2 <span class="pull-right-container"><i class="fa fa-angle-left pull-right"></i></span></a>
<ul class="treeview-menu">
<li><a href="javascript:;"> ELEMENT 2.1 </a></li>
<li><a href="javascript:;"> ELEMENT 2.2 </a></li>
</ul>
</li>
<li><a href="javascript:;"> ELEMENT 3 </a></li>
</ul>
关于jquery - 我的 jQuery 代码查找第一个父级有什么问题?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38673739/