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中，这样它就是主div的一部分。然后当你在主div上有mouseleave时，包括下拉列表。

Answer 2

也许做

<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/

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

2 个答案: