Javascript JQuery下拉列表，悬停在下拉列表上时保持向下

我设置了一个完美的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>

$（文档）.ready（函数（）{
$（“.btn幻灯片”）.hover（函数（）{
美元（“#租赁”）。幻灯片切换（“中等”）；
$（此）.toggleClass（“活动”）；
返回false；
});
});

有什么想法吗

编辑：这里有一个指向相关页面的链接：

The.hover（）绑定两个事件，mouseenter和mouseleave

我将改为使用.btn幻灯片上的mouseenter（）和.btn幻灯片上的mouseleave（）

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

<>编辑：注意，如果鼠标从不进入租约DIV，它就不会得到鼠标，你可能需要考虑。 EDIT2：修复我在函数中键入function的错误。hover（）绑定了两个事件mouseenter和mouseleave

我将改为使用.btn幻灯片上的mouseenter（）和.btn幻灯片上的mouseleave（）

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

<>编辑：注意，如果鼠标从不进入租约DIV，它就不会得到鼠标，你可能需要考虑。

---

EDIT2：修复我在funciton to function（函数）中键入的错误。我假设div在页面加载时隐藏，您希望它在您将鼠标悬停在链接上时显示吗？更改切换到向下

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

---

它是否需要在某个时候向上滑动？

我假设div在页面加载时是隐藏的，您希望它在您将鼠标悬停在链接上时显示出来？更改切换到向下

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

---

需要什么时候把它滑回去吗？

我不确定这是否是你想要的，但我会把它放在这里。它在向上滑动之前等待500毫秒，并且仅在适当的时候

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")();
    }
);

---

这里有一个演示：

我不确定这是否是您想要的，但我将把它放在这里。它在向上滑动之前等待500毫秒，并且仅在适当的时候

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")();
    }
);

---

---

这里有一个演示：

我说的这个词很奇怪吗？我想我做到了——我只是希望当用户的光标在下拉菜单上时，它不会消失。按照现在的设置方式，只有当用户将鼠标悬停在链接上时，下拉菜单才可见。

我是否说过这个奇怪的词？我想我做到了——我只是希望当用户的光标在下拉菜单上时，它不会消失。现在的设置方式是，只有当用户将鼠标悬停在链接上时，下拉菜单才可见。是的，当用户离开时，下拉菜单需要向上滑动，至少我要说使用Mark Schultheiss的方法。是的，当用户滚转时，它需要向上滑动。#至少我必须说使用Mark Schultheiss的方法。我希望首先使用链接滚动触发下拉列表：

使用此解决方案，我无法确定链接滚动的目标。您可以将事件移动到li，而不是$（“.btn slide”）使用$（.tab2”）.我也试过了，但下拉菜单仍然没有出现。我应该把它设置为display:block还是什么？我环顾了一下四周，显示：none；但是对于高度：你需要的是css高度：200px；我无法设置尺寸，因为我需要点击区域随链接文本的宽度/高度动态变化。我在这里上传了我正在处理的文件：我已经实现了您的代码更改，但没有结果。我希望最初通过链接滚动触发下拉列表：

使用此解决方案，我无法确定链接滚动的目标。您可以将事件移动到li而不是$（“.btn slide”）使用$（.tab2”）.我也试过了，但下拉菜单仍然没有出现。我应该把它设置为display:block还是什么？我环顾了一下四周，显示：none；但是对于高度：你需要的是css高度：200px；我无法设置尺寸，因为我需要点击区域随链接文本的宽度/高度动态变化。我在这里上传了我正在处理的文件：我已经实现了您的代码更改，但没有结果。这不是我对实现的确切选择，但总体思路是存在的。我喜欢这个解决方案，但我只是复制并粘贴了它，而且它似乎不会在滚动时启动。我看不出你的代码有任何明显的问题。。。Firebug也没有返回任何错误。注意：我使用相同的测试页面测试了我的解决方案（只是替换了代码部分），似乎也能正常工作。我总是忘记JSFIDLE的事情，好主意：）这不是我对实现的确切选择，但总的想法是存在的。我喜欢这个解决方案，但我只是复制并粘贴它，它似乎不会在翻滚时启动。我看不出你的代码有任何明显的问题。。。Firebug也没有返回任何错误。注意：我使用相同的测试页面测试了我的解决方案（只是替换了代码部分），似乎也能正常工作。我总是忘记这件事，好主意：）