Javascript jquery-子菜单隐藏在主菜单的鼠标输出上

这似乎是一个相当简单的问题，但我无法通过阅读这里的相关问题来解决我的问题，所以。。这是我的。我有：

<ul class="main-menu">
    <li>Letters</li>
    <li>Numbers</li>
</ul>

<ul class="sub-menu hidden">
    <li>A</li>
    <li>B</li>
    <li>C</li>
</ul>

但当我将鼠标移出主菜单时，会触发鼠标移出，即使我将鼠标移出主菜单进入子菜单，所以子菜单是隐藏的

---

有什么建议吗？但是，重新构造HTML不是一个选项。

尝试将主菜单和子菜单都放在一个div中，并将悬停事件放在div中。

尝试将主菜单和子菜单都放在一个div中，并将悬停事件放在div中。

类似于：

$(".main-menu").mouseover(function () {
    $('.sub-menu').slideDown('fast').click(function (){
        $(this).slideUp('fast');
    });
});

---

比如说：

$(".main-menu").mouseover(function () {
    $('.sub-menu').slideDown('fast').click(function (){
        $(this).slideUp('fast');
    });
});

---

下面假设您有第二个子菜单与“数字”主菜单项一起使用，如我在这里所示：-并且进一步假设当您说“重构HTML不是一个选项”时，您的意思是我甚至不能建议添加属性以将每个子菜单与其主菜单项相关联。为了在这个限制范围内工作，我使用了主菜单li元素索引来关联子菜单ul元素索引（显然，只有当子菜单按照与相应主菜单项相同的顺序定义时，这才有效）。如果您可以添加一些id属性或其他内容，那么代码将稍微简化，但无论如何：

var timerId,
    $mainMenuItems = $(".main-menu li"),
    $subMenus = $(".sub-menu");

$mainMenuItems.hover(
    function(){
        clearTimeout(timerId);
        $subMenus.slideUp('fast');
        $($subMenus[$mainMenuItems.index(this)]).hide()
                                                .removeClass('hidden')
                                                .slideDown('fast');
    }, function(){
        var i = $mainMenuItems.index(this);
        timerId = setTimeout(function(){$($subMenus[i]).slideUp('fast');},500);
    }
);
$subMenus.hover(
    function() {
       clearTimeout(timerId);
    },
    function() {
       $(this).slideUp('fast');
    }
);

基本思想是使用

setTimeout（）

延迟从主菜单隐藏mouseout上的子菜单。这样，您就有时间将鼠标移动到子菜单上，如果您这样做，超时将被清除，这样它就不会被隐藏。然后，当您将鼠标移出子菜单时，它将被隐藏。但允许鼠标在不同的主菜单项之间移动，在初始悬停时，我们也会清除任何未完成的超时，并隐藏以前显示的子菜单，以便只显示正确的子菜单。我使用了500毫秒的延迟，但很明显，你可以将其设置为任何你觉得自然的值

---

工作演示：

以下假设您有第二个子菜单与“数字”主菜单项一起使用，如我在这里所示：-并且进一步假设，当您说“重构HTML不是一个选项”时，您的意思是我甚至不能建议添加属性以将每个子菜单与其主菜单项相关联。为了在这个限制范围内工作，我使用了主菜单li元素索引来关联子菜单ul元素索引（显然，只有当子菜单按照与相应主菜单项相同的顺序定义时，这才有效）。如果您可以添加一些id属性或其他内容，那么代码将稍微简化，但无论如何：

var timerId,
    $mainMenuItems = $(".main-menu li"),
    $subMenus = $(".sub-menu");

$mainMenuItems.hover(
    function(){
        clearTimeout(timerId);
        $subMenus.slideUp('fast');
        $($subMenus[$mainMenuItems.index(this)]).hide()
                                                .removeClass('hidden')
                                                .slideDown('fast');
    }, function(){
        var i = $mainMenuItems.index(this);
        timerId = setTimeout(function(){$($subMenus[i]).slideUp('fast');},500);
    }
);
$subMenus.hover(
    function() {
       clearTimeout(timerId);
    },
    function() {
       $(this).slideUp('fast');
    }
);

基本思想是使用

setTimeout（）

延迟从主菜单隐藏mouseout上的子菜单。这样，您就有时间将鼠标移动到子菜单上，如果您这样做，超时将被清除，这样它就不会被隐藏。然后，当您将鼠标移出子菜单时，它将被隐藏。但允许鼠标在不同的主菜单项之间移动，在初始悬停时，我们也会清除任何未完成的超时，并隐藏以前显示的子菜单，以便只显示正确的子菜单。我使用了500毫秒的延迟，但很明显，你可以将其设置为任何你觉得自然的值

---

工作演示：

您只显示一个子菜单，但是否也应该有“数字”子菜单？如果不允许重新构造HTML，您如何确定哪个子菜单与哪个主菜单项相匹配？（添加属性会被认为是重组吗？）您只显示一个子菜单，但是否也应该有一个子菜单用于“数字”-并且鉴于不允许重组HTML，您如何确定哪个子菜单与哪个主菜单项相匹配？（添加属性是否会被视为重组？）