Javascript JQuery下拉行为

对JQuery来说真的很陌生。。大概2小时新的。开始为登录框编写下拉菜单，如下所示： HTML:

然后这个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和DIV不会消失，直到你的鼠标离开DIV

对不起，如果我的代码很臭。 谢谢大家

--------------------------------编辑答案-------------------- 所以，对于你们所有人来说，这是一篇完整的文章。根据您希望用户如何与之交互，有很多方法可以实现这一点

这里是方法1…这样，当鼠标离开登录按钮时，登录框就会消失。这是一个使它工作的快速方法。这个答案要感谢elclanrs besure，如果你喜欢的话，请在下面给出他的答案

JQuery：

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

HTML:

方式2添加的是一个取消按钮，就像Jared Farrish在这里做的那样： 如果你喜欢他的回答，一定要把他吐到下面

---

而方式3正是我现在尝试的，应该是最人性化和最浮华的。一旦我让它正常工作，我会发回的

与其重新发明轮子，我建议您研究一个类似hoverintent的jquery插件。它为你做了大部分工作

---

另外，从1.8版开始，jquery中就不推荐使用.live（）。您应该改为使用.on（）

与其重新发明轮子，我建议您研究一个类似hoverintent的jquery插件。它为你做了大部分工作

---

另外，从1.8版开始，jquery中就不推荐使用.live（）。您应该改为使用.on（）

这应该行得通。另外，您不需要

live（）

，顺便说一句，这在

on（）

上是不受欢迎的。对于简单的

fadeIn（）/fadeOut（）

，您也不需要这些函数：

---

这应该行得通。另外，您不需要

live（）

，顺便说一句，这在

on（）

上是不受欢迎的。对于简单的

fadeIn（）/fadeOut（）

，您也不需要这些函数：

编辑

（后续编辑：仅在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);

注意，您必须做出让步，以处理当您将鼠标移到

#logincontrol

元素中的元素上时，

鼠标输出将触发的事实。我通过让他们在
mouseenter
事件上使用
loginDisplay（）
来处理这个问题（它将在
mouseeut
上工作，但在
mouseenter
上更有逻辑意义）


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

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

编辑

（后续编辑：仅在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);


注意，您必须做出让步，以处理当您将鼠标移到
#logincontrol
元素中的元素上时，
鼠标输出将触发的事实。我通过让他们在
mouseenter
事件上使用
loginDisplay（）
来处理这个问题（它将在
mouseeut
上工作，但在
mouseenter
上更有逻辑意义）


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

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

啊，这是一个很好的自己做的事情。下面是如何做到这一点。首先，对于你需要做的事情来说，“生活”可能是过火了。在您的情况下，可以在jQuery中使用标准的悬停事件处理程序：

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

这里真正的技巧是，一旦鼠标离开按钮，就会触发鼠标移出效果。当鼠标进入登录框时，这将使菜单消失

因此，您实际上要做的是处理包含元素的悬停效果。确保您的#loginButton和#loginBox包含在父元素中，如下所示：

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

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

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

越来越高级：

如果您想更进一步，可以尝试实现一个简单的超时。我很早就知道，当我不小心把鼠标从下拉菜单上移开时，下拉菜单消失了，这对可用性是有害的。为了解决这个问题，我添加了一个简单的延迟，如果用户的鼠标在很短的时间内（比如250到350毫秒）返回下拉列表，它可以防止下拉列表隐藏。我在github上有这样一个要点，以防您以后想试用：
啊，这是一个自己动手做的好方法。下面是如何做到这一点。首先，对于你需要做的事情来说，“生活”可能是过火了。在您的情况下，可以在jQuery中使用标准的悬停事件处理程序：

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

这里真正的技巧是，一旦鼠标离开按钮，就会触发鼠标移出效果。当鼠标进入登录框时，这将使菜单消失

因此，您实际上要做的是处理包含元素的悬停效果。确保您的#loginButton和#loginBox包含在父元素中，如下所示：

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

此外，如果您在#loginBox上使用绝对定位，您将需要
<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);
});

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

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

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

#loginControl{ position: relative; }