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

Question

我试图让一个大搜索栏div在我把鼠标从那个div上移开的那一刻消失（但只有在使用另一个搜索栏上的.click功能可以看到大搜索栏之后）。

抱歉，如果这听起来令人困惑，但这就是我到目前为止所做的：

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

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

我做了一些尝试，结果证明是不正确的，例如：

$("#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示例放在一起，以便您可以尝试，或者如果我超出您的要求，我会进一步指导我，我会尝试改进它。

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

Answer 2

检查此jsfiddle链接

您的代码有语法错误

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

div 缺少结束标记。.我已经纠正了它并且它可以工作

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

Answer 3

如果我理解正确，看起来你走在正确的道路上，你只需要确保你只在正确的情况下隐藏。实现此目的的最简单方法可能是添加一个变量来存储状态，并将其设置为true事件侦听器函数。类似于将openedWithClick = true放入onClick处理程序中的内容，可能会根据您的情况添加对输入的鼠标的检查。您可能还想使用 mouseout() 而不是 mouseleave() 。如果这不是你的问题，你可能需要澄清你的示例代码到底发生了什么，以及它与你预期发生的情况有何不同。