JQuery 下拉菜单，将鼠标悬停在下拉菜单上时保持按下状态

Question

我设置了一个完美的 jquery 下拉菜单。当用户将鼠标悬停在链接上时，它就会下降。问题在于，当用户将鼠标滑过下拉菜单的内容区域时，它会向上滑动。我需要设置代码，以便当用户的光标仍在其上方时，滑动框保持在向下位置。

这是我的 HTML：

<ul id="tabnav"> 
<li class="tab2"><a href="index2.html" class="btn-slide">My Leases</a></li> 
</ul>   

<div id="leases"> 
<!-- slide down content here --> 
</div>

JS 触发器：

<script type="text/javascript"> 
$(document).ready(function(){
  $(".btn-slide").hover(function(){
    $("#leases").slideToggle("medium");
    $(this).toggleClass("active"); 
    return false;
  });
});
</script>

有什么想法吗？

编辑：这是相关页面的链接： http://designvillain.com/testbed/600 /601.html

Answer 1

我不确定这是否是你想要的，但我就把它放在这里。它会等待 500 毫秒，然后才会向上滑动#leases，并且仅在适当的情况下

var isMousedOver;

var hideDropdown = function(a) {
        setTimeout( function() {
            if (isMousedOver) return;
            $("#leases").slideUp("medium");
            $(a).removeClass("active");
        }, 500);
}

$(".btn-slide").hover(
    function(){
        $("#leases").stop(true,true).slideDown("medium");
        isMousedOver = true;
        $(".btn-slide").removeClass("active");
        $(this).addClass("active");
        var that = this;
        $("#leases").data("mouseoutfn", function() { hideDropdown(that) });
    },
    function(){
        isMousedOver = false;
        hideDropdown(this);
    }
);

$("#leases").hover(
    function() {
        isMousedOver = true;
    },
    function() {
        isMousedOver = false;
        $(this).data("mouseoutfn")();
    }
);

这是一个演示：http:// /jsfiddle.net/mMRZc/

Answer 2

.hover() 绑定两个事件，mouseenter 和 mouseleave。

相反，我会更精细地使用 .btn-slide 上的 mouseenter() 和 .leases 上的 mouseleave()

$(function()
{    
    $(".btn-slide").mouseenter(function(){ 
        $("#leases").slideToggle("medium"); 
        $(this).toggleClass("active");
    });
    $("#leases").mouseleave(function(){
      $(".btn-slide").toggleClass("active");
      $(this).slideToggle("medium"); 
    });
});

编辑：注意，如果鼠标从未进入 #leases div，它将不会获得 mouseleave，并且您可能会需要考虑这一点。

EDIT2：修复我错误的功能手指输入功能

Answer 3

我假设 div 在页面加载时隐藏，并且您希望当您将鼠标悬停在链接上时显示它？将切换开关更改为向下...

$(document).ready(function(){
$("#leases").hide();
$(".btn-slide").hover(function(){
    $("#leases").slideDown("medium");
    $(this).toggleClass("active"); 
return false;
});
});

是否需要有时向上滑动？