只允许更改刚刚激活的侧边栏菜单项的图标

Question

我想要一些建议，只更改单击的菜单项的图标(箭头(，而不在所有菜单项中更改它。

如下图所示，当您单击菜单项时，所有箭头都会发生变化。

MyimageAttached

//sidebarMenu
jQuery('#sidebar .sub-menu > a').click(function() {
var last = jQuery('.sub-menu.open', jQuery('#sidebar'));
jQuery('.menu-arrow').removeClass('arrow_carrot-right');
jQuery('.sub', last).slideUp(200);
var sub = jQuery(this).next();
if (sub.is(":visible")) {
jQuery('.menu-arrow').addClass('arrow_carrot-right');
sub.slideUp(200);
} else {
jQuery('.menu-arrow').addClass('arrow_carrot-down');
sub.slideDown(200);
}
var o = (jQuery(this).offset());
diff = 200 - o.top;
if (diff > 0)
jQuery("#sidebar").scrollTo("-=" + Math.abs(diff), 500);
else
jQuery("#sidebar").scrollTo("+=" + Math.abs(diff), 500);
});

.arrow_carrot-up,
.arrow_carrot-down,
.arrow_carrot-left,
.arrow_carrot-right {
font-family: 'ElegantIcons';
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
}
.menu-arrow {
float: right;
margin-right: 8px;
}

<ul class="sidebar-menu">
<li class="active">
<a class="" href="index.html">
<i class="icon_house_alt"></i>
<span>Menu</span>
</a>
</li>
<li class="sub-menu">
<a href="javascript:;" class="">
<i class="icon_document_alt"></i>
<span>MenuItem1</span>
<span class="menu-arrow arrow_carrot-right"></span>
</a>
<ul class="sub">
<li><a class="" href="page1.html">Sub-Item</a></li>
<li><a class="" href="page2.html">Sub-Item</a></li>
<li><a class="" href="page3.html">Sub-Item</a></li>
</ul>
</li>
<li class="sub-menu">
<a href="javascript:;" class="">
<i class="icon_desktop"></i>
<span>MenuItem2</span>
<span class="menu-arrow arrow_carrot-right"></span>
</a>
<ul class="sub">
<li><a class="" href="page4.html">Sub-Item</a></li>
<li><a class="" href="page5.html">Sub-Item</a></li>
<li><a class="" href="page6.html">Sub-Item</a></li>
</ul>
</li>
<li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

提前感谢

Answer 1

在jQuery中，$(this)将仅引用被单击的元素。因此，如果点击了a标签，点击事件将冒泡到最近的.sub-menu，您可以在那里捕获点击(或者，如果您愿意，您可以将其捕获在a上…(

试试这个：

$('#sidebar .sub-menu').click(function () {
$(this).find('.menu-arrow').removeClass('arrow_carrot-right').addClass('arrow_carrot-down');
});