jQuery悬停函数

我的脚本在没有$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>

汽车










轮胎

---

.Main菜单有两个子菜单以上

这只是一个未经测试的黑暗拍摄，但我认为您使用超时函数的上下文正在失去悬停函数中的元素上下文。
使用类似于

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');
            }
        });
});

---

你能用一个JSFIDLE来显示你想要实现的目标和$this是什么吗？两个子菜单显示的可能都是Now on hover，我只需要显示悬停的菜单