0

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

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

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

div 是小的#bar-b主搜索栏，一旦我单击它，#quickSearchdiv（我创建的大搜索栏）就会出现在小主搜索栏的正下方。我想要做的是当我将光标移动到#quickSearchdiv 中时（我希望不会进行任何更改，所以什么都不会发生，这就是它到目前为止所做的）但是当我将光标从#quickSearchdiv 中移开时，我想要#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>
4

3 回答 3

1

检查这个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>​​​​​​​​​​​​
于 2012-08-16T08:57:32.133 回答
1

我想这就是你所追求的，如果是这样，那么你真的不远了！我整理了一个jsFiddle 示例，因此您可以随意玩耍，或者如果我不符合您的要求，请进一步指导我，我会尝试改进它。

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

$("#quickSearch").bind("mouseout", function() {
    $(this).hide();
});
​
于 2012-08-16T09:08:33.457 回答
0

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

于 2012-08-16T08:57:04.880 回答