JQuery下拉，悬停在下拉时保持向下答案

【问题标题】：JQuery drop down, remain down while hover over drop downJQuery下拉，悬停在下拉时保持向下
【发布时间】：2010-07-16 00:45:12
【问题描述】：

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

【问题讨论】：

我说这话是不是很奇怪？我想我做到了——我只是想让下拉菜单在用户光标悬停时不消失。现在的设置方式，下拉菜单仅在用户悬停在链接<li class="tab2"><a href="index2.html" class="btn-slide">My Leases</a></li> 上时可见

标签： javascript jquery html drop-down-menu

【解决方案1】：

我不确定这是否是您想要的，但我将把它放在这里。在向上滑动 #leases 之前，它会等待 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")();
    }
);

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

【讨论】：

不是我的具体实施选择，但总体思路就在那里。
我喜欢这个解决方案，但我只是复制并粘贴它，它似乎不会在翻转时触发。我看不出您的代码有任何明显的问题... Firebug 也没有返回任何错误。
注意：我使用相同的测试页面（只是替换了代码部分）测试了我的解决方案，似乎也可以工作。我总是忘记 jsfiddle 的事情，好主意 :)

【解决方案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：修复我的功能错误手指打字功能

【讨论】：

我想最初通过链接翻转触发下拉：<a href="index2.html" class="btn-slide">My Leases</a> 使用此解决方案，我无法定位链接翻转。
您可以将事件移动到 li 而不是 $(".btn-slide") 使用 $(".tab2")。
我也试过了，下拉菜单仍然没有出现。我应该将其设置为显示：阻止还是什么？
我环顾四周并显示：无；但是 WITH 高度：需要你想要的，比如 css height:200px;
我无法设置尺寸，因为我需要点击区域随着链接文本的宽度/高度动态变化。我在这里上传了我正在处理的文件：designvillain.com/testbed/600/601.html我已经实现了你的代码更改，但没有结果。

【解决方案3】：

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

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

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

【讨论】：

是的，当用户退出#leases时它需要向上滑动
那我就不得不说马克舒尔泰斯的方法了。