j查询对嵌套鼠标输入的影响<li>也激活父级<li>

Question

我创建了一个带有子菜单的菜单，并在我用lottie附加的每个li元素上.js一个带有mouseenter动画的svg元素。
我尝试使用 .each() 函数在 jQuery 中实现所有这些，而不是为每个 li 编写相同的代码.
问题是，当我悬停在子 li 上时，父 li 动画也被激活，我真的不明白为什么，'因为类输出特定于鼠标悬停的元素。

这是菜单的 HTML 输出

<nav>
<div class="menu-main-menu-container">
<ul id="menu-main-menu" class="menu">
<li class="menu-item shoes">
<a class="menu-item-link" href="#">
<div id="item-shoes"><!-- SVG icon with animation --></div>
<span class="menulink">Shoes</span>
</a>
<ul class="sub-menu">
<li class="menu-item shoes-woman">
<a class="menu-item-link" href="#">
<div id="item-shoes-woman"><!-- SVG icon with animation --></div>
<span class="menulink">Shoes woman</span>
</a>
</li>
<li class="menu-item shoes-man">
<a class="menu-item-link" href="#">
<div id="item-shoes-man"><!-- SVG icon with animation --></div>
<span class="menulink">Shoes man</span>
</a>
</li>
</ul>
</li>
<li class="menu-item shirts">
<a class="menu-item-link" href="#">
<div id="item-shirts"><!-- SVG icon with animation --></div>
<span class="menulink">Shirts</span>
</a>
</li>
</ul>
</div>
</nav>

这是我尝试的jQuery代码

var menu_array = ['shoes', 'shirts', 'shoes-woman', 'shoes-man'];
$.each(menu_array, function(key, value) {
var ID = document.getElementById('item-'+value);
var menuicon = lottie.loadAnimation({
container: ID,
renderer: 'svg',
loop: true,
autoplay: false,
path: basepath+'assets/img/'+value+'.json',
});
$('.'+value).on('mouseenter', function(){
console.log(this);
menuicon.goToAndPlay(1, true);
});
$('.'+value).on('mouseleave', function(){
menuicon.goToAndStop(1, true);
});
});

使用此代码，我得到不希望的结果，即如果我悬停在一个子 li 元素上，父元素也会激活动画。
我还尝试在每个循环之外编写 mouseenter 和 mouseleave 事件，但结果是相同的。
我花了整个上午的时间弄清楚问题出在哪里。
我只通过控制台了解.log在 sub li 悬停时我同时得到 li(父母和孩子)，但我不明白为什么 '导致

$('.'+value).on('mouseenter', function(){
console.log(this);
menuicon.goToAndPlay(1, true);
});

必须打印

$('.shoes-man').on('mouseenter', function(){
console.log(this);
menuicon.goToAndPlay(1, true);
});

因此，只有选择器 .shoes-man 必须获取 mouseenter 事件，而不是 .shoes 父元素。

谢谢

Answer 1

我已经找到了javascript $('.'+value+' > a').on('mouseleave', function(e){鼠标事件的解决方案。
我终于在这个答案上找到了解决方案。我以前没有找到它：嵌套列表，jquery和stopPropagation
所以工作代码是：

$.each(menu_array, function(key, value) {
var ID = document.getElementById('item-'+value);
var menuicon = lottie.loadAnimation({
container: ID,
renderer: 'svg',
loop: true,
autoplay: false,
path: basepath+'assets/img/'+value+'.json',
});
$('.'+value+' > a').on('mouseenter', function(e){
menuicon.goToAndPlay(1, true);
});
$('.'+value+' > a').on('mouseleave', function(e){
menuicon.goToAndStop(1, true);
});
});```