Question

我创建了带有子菜单的菜单，并在与lottie.js附加的每个li元素上创建了一个带svg元素的mouseenter动画。我尝试使用.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);
    });
});

使用此代码，我得到了意外的结果，如果我将鼠标悬停在一个sub li元素上，那么父级也会激活动画。
我还尝试在每个循环之外编写mouseenter和mouseleave事件，但结果是相同的。
我一整个上午都在想出问题所在。
我仅通过console.log理解，在li 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){上找到了鼠标事件的解决方案。
我终于在此答案上找到了解决方案。我以前没有找到它：Nested Lists, jquery, and 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);
    });
});```

jQuery对嵌套<li>上mouseenter的影响也激活了父<li>

1 个答案: