javascript - 如何在使用 .click 后使用 .blur 删除另一个 div

Question

我试图让一个大搜索栏 div 在我将鼠标从该 div 上移开后消失(但只有在通过使用另一个搜索栏上的 .click 函数才能看到大搜索栏之后)。

抱歉，如果这听起来令人困惑，但这就是我迄今为止所做的:

$("#bar-b").click(function() {
    $("#quickSearch").show();
});

#bar-bdiv 是一个小的主搜索栏，一旦我点击它，#quickSearch div(我创建的大搜索栏)就会出现在小主搜索栏的正下方可见。我想做的是，当我将光标移动到 #quickSearch div 时(我希望不会进行任何更改，所以不会发生任何事情，这就是它迄今为止所做的)但是当我将光标从 #quickSearch div 移开，我希望 #quickSearch div 消失。如果有人可以告诉我如何做到这一点，那么我将不胜感激。

我做了一些尝试，结果都是不正确的，例如:

$("#bar-b").click(function() {
    $("#quickSearch").show();
});

$("#quickSearch").mouseleave(function() {
    $("#quickSearch").hide();
});

HTML 标签(如果有帮助的话，在每个 div 下面列出):

<div id="bar-b">
    <a name="thesearchbox"></a>
    <input id="Keyword" accesskey="4" type="text" name="keyword" value="Search   Jessops - Keyword, name, catalogue no." style="color: rgb(153, 153, 153); ">
    <input id="cmdSearch" class="button" type="submit" value="">
</div>

<div id="quickSearch" style="border: 3px solid black; height: 250px; display: none;">/div>

Answer 1

我想这就是您所追求的，如果是这样，那么您就离我们不远了!我整理了一个jsFiddle example这样您就可以尝试一下，或者如果我没有达到您的要求，请进一步指导我，我会尽力改进它。

$("#bar-b").bind("click", function() {
    $("#quickSearch").show();
});

$("#quickSearch").bind("mouseout", function() {
    $(this).hide();
});
​