JQuery Dropdown行为

Question

对JQuery来说真的很新...就像2小时新的一样。开始为这样的登录框写下拉菜单： HTML：

<button id="loginButton">Login</button> 

当你将鼠标悬停在它上面时，这个JQuery会运行：

$('#loginButton').live('hover', function() {
    login_drop();   
});

function login_drop(){
$('#loginBox').fadeIn();

}

$('#loginButton').live('hover', function() {
    login_away();

});

function login_away(){
$('#loginBox').fadeOut();
}

然后这个HTML DIV直接出现在按钮下面：

<div id="loginBox">                
<label for="email_B">Email Address</label>
<input type="text" name="email_B" id="email_B" />
<label for="password">Password</label>
<input type="password_B" name="password_B" id="password_B" />
<input type="submit" id="login" value="Sign in" />
<label for="checkbox"><input type="checkbox" id="checkbox" />Remember me</label>
<span><a href="#">Forgot your password?</a></span>
</div>

和那个DIV上的CSS是这样的：

#loginBox {
    position:absolute;
    top:70px;
    right:100px;
    display:none;
 z-index:1;
}

这一切都有效，但它的行为很糟糕。如何制作它以便您可以将鼠标悬停在按钮上，将鼠标放入新出现的DIV中，div将不会消失，直到鼠标离开div？

很抱歉，如果我的编码很糟糕。 谢谢一群人！

--------------------------------编辑AKA答案----------- --------- 所以你们所有人都在阅读这篇文章。根据您希望用户与其进行交互的方式，有很多方法可以完成这项工作。

以下是方式1 ...这样，当您的鼠标离开登录按钮时，登录框会淡出。这是使其工作的快速方法。这个答案要归功于elclanrs如果你愿意，可以在下面给出他的答案。

JQuery的：

$(function(){
$('#loginButton').mouseenter(function(){ $('#loginBox').fadeIn(); }); 
$('#login').mouseout(function(){ $('#loginBox').fadeOut(); }); 
});

HTML：

<div id="loginBox">                
<label for="email_B">Email Address</label>
<input type="text" name="email_B" id="email_B" />
<label for="password">Password</label>
<input type="password_B" name="password_B" id="password_B" />
<input type="submit" id="login" value="Sign in" />
<label for="checkbox"><input type="checkbox" id="checkbox" />Remember me</label>
<span><a href="#">Forgot your password?</a></span>
</div>

CSS：

#loginBox {
position:absolute;
top:70px;
right:100px;
width:200px;
height:200px;
display:none;
z-index:99;
background:url(../images/162.png);
}

WAY 2添加的是像Jared Farrish这样的取消按钮： http://jsfiddle.net/j4Sj5/4/ 如果你喜欢他的答案，一定要在下面投票给他！

和WAY 3是我现在正在尝试的，应该是最友好和华丽的用户。一旦我让它正常工作，我会回发！

Answer 1

啊这是一个很棒的人。这是怎么做的。首先，对于你需要做的事情来说，现场可能有点过头了。在您的情况下，您可以在jQuery中使用标准的悬停事件处理程序：

$('#loginButton').hover(function() {
  $('#loginBox').fadeIn();
}), function(){
  $('#loginBox').fadeOut();
});

这里的真正诀窍是，只要鼠标离开按钮，就会触发鼠标移出效果。当鼠标进入登录框时，这将使菜单消失！

所以你真正想做的是处理包含元素的悬停效果。确保#loginButton和#loginBox包含在父元素中，如下所示：

<div id="loginControl">
   <button id="loginButton">Login</button> 
   <div id="loginBox">...</div>
</div>

然后将事件附加到loginButton的父级：

$('#loginButton').parent().hover(function() { ... }), function(){ ... });

另外，如果您在#loginBox上使用绝对定位，您还需要确保在其父级（我的示例中为#loginControl）上使用position：relative：

#loginControl{ position: relative; }

如果您有任何问题，请告诉我。

获得更高级：

如果您想更进一步，可以尝试实现简单的超时。我很早就知道，当我不小心将鼠标从下拉列表中移开时，可用性会导致下拉菜单消失。为了解决这个问题，我添加了一个简单的延迟，如果用户的鼠标在很短的时间内（例如250到350毫秒）返回到下拉列表，就会阻止下拉隐藏。我将此作为github上的一个要点，以防你想稍后试一试：https://gist.github.com/71548

Answer 2

修改

（后续编辑：在show login元素上仅鼠标悬停后添加了超时隐藏，以及其他一些更新。）

虽然我仍然认为使用mouseenter和mouseout处理登录表单不是从可用性角度出发的正确方法，但下面是演示Jim Jeffers描述并试图处理的代码该方法的一些缺陷：

var setuplogindisplay = function(){
    var $loginbox = $('#loginBox'),
        $loginshow = $('#loginShow'),
        $logincontainer = $('#loginContainer'),
        $cancellogin = $('#cancelLogin'),
        keeptimeout,
        closetimeout;

    var keepDisplay = function(){
        clearAllTimeouts();
        keeptimeout = setTimeout(loginHide, 2000);
    };

    var loginDisplay = function(){
        clearAllTimeouts();
        if ($loginbox.is(':hidden')) {
            $loginbox.fadeIn();
        }
    };

    var loginHide = function(){
        clearAllTimeouts();
        if ($loginbox.is(':visible')) {
            if (!$(this).is('#cancelLogin')) {
                closetimeout = setTimeout(function(){
                    $loginbox.fadeOut();
                }, 1500);
            } else {
                $loginbox.fadeOut();
            }
        }
    };

    function clearAllTimeouts() {
        if (keeptimeout) {
            clearTimeout(keeptimeout);
        }
        if (closetimeout) {
            clearTimeout(closetimeout);
        }
    }

    $loginshow.mouseover(loginDisplay);
    $loginshow.mouseout(keepDisplay);
    $logincontainer
        .mouseout(loginHide)
        .children()
            .mouseover(loginDisplay)
            .mouseout(keepDisplay);
    $cancellogin.click(loginHide);
};

$(document).ready(setuplogindisplay);

http://jsfiddle.net/j4Sj5/19/

注意，当您将鼠标悬停在mouseout元素中的元素上时，您必须做出让步以处理#logincontrol将触发的事实。我通过在loginDisplay()事件上mouseenter处理它来处理此问题（它将在mouseout上运行，但在mouseenter上更符合逻辑。

---

在尝试访问表单时，我会牢记表单的可用性，并尽量不要过于聪明或过度设计用户体验。考虑：

<input type="button" id="cancelLogin" value="Cancel" />

使用此选项可以关闭/隐藏表单，而不是对其他元素执行操作。如果您将关闭表单操作放在mouseout之类的事件上，当他们意外地或故意地移动鼠标时，您将会加剧用户，只会发现登录表单已关闭。 IMO这个表单应该有一个控件，可以根据用户的选择触发事件来隐藏它。

<span id="loginButton">Show Login</span>
<div id="loginBox">                
    <label for="email_B">Email Address</label>
    <input type="text" name="email_B" id="email_B" />
    <label for="password">Password</label>
    <input type="password_B" name="password_B" id="password_B" />
    <input type="submit" id="login" value="Sign in" />
    <input type="button" id="cancelLogin" value="Cancel" />
    <label for="checkbox"><input type="checkbox" id="checkbox" />Remember me</label>
    <span><a href="#">Forgot your password?</a></span>
</div>

$(document).ready(function(){
    var $loginbox = $('#loginBox'),
        $button = $('#loginButton'),
        $cancellogin = $('#cancelLogin');

    var loginDisplay = function(){
        $loginbox.fadeIn();
    };

    var loginHide = function(){
        $loginbox.fadeOut();
    };

    $button.click(loginDisplay);
    $cancellogin.click(loginHide);
});

http://jsfiddle.net/j4Sj5/4/

Answer 3

我不建议重新发明轮子，而是建议查看像hoverintent这样的jquery插件。它为您完成大部分工作。

而且，在相关的说明中，自v1.8起，jquery中的.live（）已被弃用。你应该使用.on（）。

Answer 4

这应该有效。另外，您不需要live()顺便提及on()。对于简单的fadeIn()/fadeOut()：

，您也不需要这些功能

$('#loginButton').mouseenter(function(){ $('#loginBox').fadeIn(); });
$('#loginBox').mouseout(function(){ $(this).fadeOut(); });