[英]What's wrong with my jQuery code finding the first parent?
我正在开发一个具有树视图菜单的小应用程序,所以这是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 parent(由于其他原因,我不能不使用:not
selector:
$(".sidebar-menu").on("click", "li:not(.treeview)", function(e){
$(e.delegateTarget).parents("li").first();
}
if语句按预期工作,但第二行总是在控制台中给出一个undefined
错误。
工作小提琴 。
您可以使用引用当前单击元素的jQuery对象$(this)
,然后使用addClss()
添加类活动类:
$(this).parents('li').addClass('active');
注意:你必须使用$('li').removeClass('active');
从所有其他li中删除活动类。
希望这可以帮助。
$(".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>
使用$(this)
而不是$(e.delegateTarget)
$(".sidebar-menu").on("click", "li:not(.treeview)", function(e){
$(this).parents("li").first();
}
我的提议基于toggleclass和event stopPropagation:
$(function () { $(".sidebar-menu").on("click", "li", function(e){ $(".sidebar-menu").find('.active').toggleClass('active'); if ($(this).is('li.treeview')) { $(e.target).toggleClass('active'); } else { $(e.target).closest("li").toggleClass('active'); if ($(e.target).closest('.treeview').length == 1) { $(e.target).closest('.treeview-menu').prev().toggleClass('active'); e.stopPropagation(); } } }); });
.active { background-color: red; }
<script src="https://code.jquery.com/jquery-1.12.4.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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.