从头开始的基本 Jquery 下拉菜单

Question

我正在尝试使用 jquery 构建一个基本的下拉菜单。我在顶部导航中有一个按钮，当用户悬停时，一个 div 会滑到它下面。这是我到目前为止的代码：

<script>

$('.rentals-link').mouseenter(function() {
  $('.region-drop-down-menu').slideDown();
});

$('.region-drop-down-menu').hover(function() {
  $('.region-drop-down-menu').slideDown();
});

$('.region-drop-down-menu').mouseleave(function() {
  $('.region-drop-down-menu').slideUp();
});


</script>

代码的问题在于，我不知道如何在鼠标离开按钮区域时让 div 向上滑动，以及在离开 div 区域时如何让它向上滑动。有什么建议吗？

Answer 1

也许会

<div class="dropdown-menu-toggle">Toggle</div>
<div class="dropdown-menu-content">...</div>

和

var isInDropDown = false, isInToggle = false;
$('.dropdown-menu-toggle').mouseenter(function() {
    $('.dropdown-menu-content').slideDown();
    isInToggle = true;
}).mouseleave(function() {
    setTimeout(function() {
        if(! isInDropDown) {
            $('.dropdown-menu-content').slideUp();
        }
    }, 1000);
    isInToggle = false;
});
$('.dropdown-menu-content').mouseenter(function() {
    $('.dropdown-menu-content').slideDown();
    isInDropDown = true;
}).mouseleave(function() {
    setTimeout(function() {
        if(! isInToggle) {
            $('.dropdown-menu-content').slideUp();
        }
    }, 1000);
    isInDropDown = false;
});

因此，两个元素在关闭之前都会检查鼠标指针是否在另一个元素之内。这也给了用户一些时间来移动光标（1 秒）。我的 jsfiddle 叉子：http://jsfiddle.net/zkRq2/

Answer 2

通常您希望将下拉菜单放在主 div 中，这样它就是主 div 的一部分。然后，当您在主 div 上有 mouseleave 时，包括下拉菜单。