javascript - ul 简单的弹出菜单

Question

我正在构建一个下拉菜单。主图像有一个翻转和一个滚动事件，用于切换包含我的弹出菜单的 div 的显示。问题是当我推出主图像时，我的弹出菜单消失了(很明显!)。我希望能够在不消失的情况下将鼠标向下移动到弹出菜单上。我还希望图像具有翻转状态 - 这是我的代码:

<a class="mypage" href="mypage.html" id="mypageid" onmouseover="document.getElementById('menu-container').style.display = 'block';"  onmouseout="document.getElementById('menu-container').style.display = 'none';"></a>
<div id="menu-container">
    <ul>
        <li><a href="#"><img src="images/nav/button1.jpg" alt="" width="126px" height="21px"/></a></li>
        <li><a href="#"><img src="images/nav/button2.jpg" alt="" width="126px" height="21px"/></a></li>
        <li><a href="#"><img src="images/nav/button3.jpg" alt="" width="126px" height="21px"/></a></li>
    </ul></div>

Answer 1

用于解决此问题的常用模式是使用计时器延迟隐藏菜单。如果用户的鼠标在计时器触发之前重新进入触发器或菜单本身，则计时器(和隐藏)将被清除。

var menuTimer = null;

$('.mypage, #menu-container').mouseenter(function(e) {
    $('#menu-container').show();
    clearTimeout(menuTimer);
});

$('.mypage, #menu-container').mouseleave(function(e) {
    menuTimer = setTimeout(function() {
        $('#menu-container').hide();
    }, 300);
});

示例:http://jsfiddle.net/xA6MH/

这个概念可以很容易地适用于 vanilla JS。