Question

我的脚本在没有$ this的情况下正常工作，但是当我删除$ this时，则在悬停脚本上显示所有子菜单。有人可以解释我哪里弄错了吗？

$(function () {
    var timeoutId;
    $(".mainmenu li").hover(function () {
            if (!timeoutId) {
                timeoutId = window.setTimeout(function () {
                    timeoutId = null;
                    $(this).find('.submenu').slideDown('slow');
                }, 1500);
            }
        },
        function () {
            if (timeoutId) {
                window.clearTimeout(timeoutId);
                timeoutId = null;
            } else {
                $(".submenu").slideUp('slow');
            }
        });
});

我的HTML：

<div id="a">
   <ul class="mainmenu">
   <li>
      CARS
      <ul class="submenu">
         <li><a href="#">White</a></li>
         <li><a href="#">Black</a></li>
         <li><a href="#">Red</a></li>
         <li><a href="#">Silver</a></li>
         <li><a href="#">Yellow</a></li>
         <li><a href="#">Other</a></li>
      </ul>
   </li>
   <li>
      TIRES
      <ul class="submenu">
         <li><a href="#">14"</a></li>
         <li><a href="#">15"</a></li>
         <li><a href="#">16"</a></li>
         <li><a href="#">17"</a></li>
         <li><a href="#">18"</a></li>
      </ul>
   </li>
</div>

.mainmenu有超过2个子菜单。

Answer 1

它只是一个未经测试的黑暗镜头，但我认为你通过使用超时功能的上下文在你的悬停功能中丢失了元素上下文。
使用类似self变量的东西来存储元素，并在超时到期后使用它。

$(function () {
    var timeoutId;
    $(".mainmenu li").hover(function () {
            // store the context
            var self = this;

            if (!timeoutId) {
                timeoutId = window.setTimeout(function () {
                    timeoutId = null;
                    // this represents the context of the timeout function
                    // we're using the stored context here
                    $(self).find('.submenu').slideDown('slow');
                }, 1500);
            }
        },
        function () {
            if (timeoutId) {
                window.clearTimeout(timeoutId);
                timeoutId = null;
            } else {
                $(".submenu").slideUp('slow');
            }
        });
});

jQuery悬停在函数中

1 个答案: