在 jQuery 中，鼠标事件触发错误的元素。 我怎样才能解决这个问题？

Question

我正在使用此 HTML 代码在 Wordpress 网站中处理 Bootstrap 导航栏 ->

<nav id="menu" class="navbar navbar-expand-md navbar-light bg-faded">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#bs4navbar"
            aria-controls="bs4navbar" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div id="bs4navbar" class="collapse navbar-collapse">
        <ul id="menu-main" class="navbar-nav mr-auto">

            <li id="menu-item-61"
                class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-61 nav-item"><a
                    href="#"
                    class="nav-link">ITEM 61</a></li>

            <li id="menu-item-59"
                class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-59 nav-item"><a
                    href="#"
                    class="nav-link">ITEM 59</a></li>

            <li id="menu-item-56"
                class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-has-children menu-item-56 nav-item dropdown">
                <a href="#"
                   class="nav-link dropdown-toggle" data-toggle="dropdown">ITEM 56</a>
                <div class="dropdown-menu">
                    <a href="#"
                       class=" dropdown-item">ITEM 56 - A</a><a
                        href="#"
                        class=" dropdown-item">ITEM 56 - B</a></div>
            </li>
            <li id="menu-item-48"
                class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-has-children menu-item-48 nav-item dropdown">
                <a href="#"
                   class="nav-link dropdown-toggle" data-toggle="dropdown">ITEM 48</a>
                <div class="dropdown-menu">
                    <a href="#"
                       class=" dropdown-item">ITEM 48 - A</a><a
                        href="#"
                        class=" dropdown-item">ITEM 48 - B</a><a
                        href="#"
                        class=" dropdown-item">ITEM 48 - C</a><a
                        href="#"
                        class=" dropdown-item">ITEM 48 - D</a></div>
            </li>

            <li id="menu-item-53"
                class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-has-children menu-item-53 nav-item dropdown">
                <a href="#"
                   class="nav-link dropdown-toggle" data-toggle="dropdown">ITEM 53</a>
                <div class="dropdown-menu" style="display: none;">
                    <a href="#"
                       class=" dropdown-item">ITEM 53 - A</a><a
                        href="#"
                        class=" dropdown-item">ITEM 53 - B</a></div>
            </li>

        </ul>
    </div>
</nav>

这些项目56，48和53有.dropdown-menu ，基本上当我集团公司在其中的一个我希望看到的子菜单; 它的原生bootstrap.js脚本不起作用（我不知道原因）。

要解决此问题，我可以使用此代码触发鼠标事件 ->

<script>

            $(function ($) {

                $nav = $('nav#menu');

                $('.dropdown', $nav).each(function () {

                    console.log('.dropdown ->');
                    console.log($(this));

                    $subMenu = $('.dropdown-menu', $(this));

                    console.log('$subMenu ->');
                    console.log($subMenu);

                    $(this).mouseenter(function () {

                        console.log('mouseenter ->');
                        console.log($(this));

                        $subMenu.show();

                        console.log('$subMenu ->');
                        console.log($subMenu);

                    }).mouseleave(function () {

                        console.log('mouseleave ->');
                        console.log($(this));

                        $subMenu.hide();

                        console.log('$subMenu ->');
                        console.log($subMenu);
                    });

                });

            });

        </script>

 $(function($) { $nav = $('nav#menu'); $('.dropdown', $nav).each(function() { console.log('.dropdown ->'); console.log($(this)); $subMenu = $('.dropdown-menu', $(this)); console.log('$subMenu ->'); console.log($subMenu); $(this).mouseenter(function() { console.log('mouseenter ->'); console.log($(this)); $subMenu.show(); console.log('$subMenu ->'); console.log($subMenu); }).mouseleave(function() { console.log('mouseleave ->'); console.log($(this)); $subMenu.hide(); console.log('$subMenu ->'); console.log($subMenu); }); }); });

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="undefined" crossorigin="anonymous"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <nav id="menu" class="navbar navbar-expand-md navbar-light bg-faded"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#bs4navbar" aria-controls="bs4navbar" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div id="bs4navbar" class="collapse navbar-collapse"> <ul id="menu-main" class="navbar-nav mr-auto"> <li id="menu-item-61" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-61 nav-item"><a href="#" class="nav-link">ITEM 61</a></li> <li id="menu-item-59" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-59 nav-item"><a href="#" class="nav-link">ITEM 59</a></li> <li id="menu-item-56" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-has-children menu-item-56 nav-item dropdown"> <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">ITEM 56</a> <div class="dropdown-menu"> <a href="#" class=" dropdown-item">ITEM 56 - A</a><a href="#" class=" dropdown-item">ITEM 56 - B</a></div> </li> <li id="menu-item-48" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-has-children menu-item-48 nav-item dropdown"> <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">ITEM 48</a> <div class="dropdown-menu"> <a href="#" class=" dropdown-item">ITEM 48 - A</a><a href="#" class=" dropdown-item">ITEM 48 - B</a><a href="#" class=" dropdown-item">ITEM 48 - C</a><a href="#" class=" dropdown-item">ITEM 48 - D</a></div> </li> <li id="menu-item-53" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-has-children menu-item-53 nav-item dropdown"> <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">ITEM 53</a> <div class="dropdown-menu" style="display: none;"> <a href="#" class=" dropdown-item">ITEM 53 - A</a><a href="#" class=" dropdown-item">ITEM 53 - B</a></div> </li> </ul> </div> </nav>

（我离开了console.log()用于调试目的）。

当我在各自的区域上移动鼠标时，我希望看到子菜单。

（错误的）结果是当我在这 3 个元素中的任何一个中移动鼠标时，它会显示列表中的最后一个.dropdown-menu 。

控制台在.each()显示正确的元素，但在触发时它只显示列表中的最后一个.dropdown-menu元素。

我想不通怎么会有这样的事情。

任何人都可以解释发生了什么？ 我该如何解决？

Answer 1

主要是你在声明变量时缺少var ，所以创建全局变量。

我整理了你的代码有点像这样：

$(function ($) {
    var $nav = $('nav#menu');

    $nav.find('.dropdown').each(function () {
        var $dropdown = $(this);

        $(this).mouseenter(function () {
            var $subMenu = $dropdown.find('.dropdown-menu');
            $subMenu.show();
        }).mouseleave(function () {
            var $subMenu = $dropdown.find('.dropdown-menu');
            $subMenu.hide();
        });
    });
});

Answer 2

关于评论，我在事件函数中移动了$subMenu并且它可以工作。

谢谢skyline3000

<script>

            $(function ($) {

                $nav = $('nav#menu');

                $('.dropdown', $nav).each(function () {

                    $(this).mouseenter(function () {

                        $subMenu = $('.dropdown-menu', $(this));
                        $subMenu.show();

                    }).mouseleave(function () {

                        $subMenu = $('.dropdown-menu', $(this));
                        $subMenu.hide();

                    });

                });

            });

        </script>