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

Question

I am trying to make a big search bar div disappear the second I remove my mouse away from that div (but ONLY after the big search bar is visible from using .click function on another search bar).

Sorry if this sounds confusing but this is what I have done so far:

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

The #bar-b div is the small main search bar that once I click on it, the #quickSearch div (the big search bar that I created) appears visible right underneath the small main search bar. What I am trying to do is when I move my cursor into the #quickSearch div (I expect no changes to be made, so nothing to happen, which is what it has done so far) but when I move my cursor AWAY from #quickSearch div, I want #quickSearch div to disappear. If anyone can show me how to do that then I'd appreciate it thanks.

I have made a few attempts, which turned out to be incorrect, such as:

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

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

HTML tags (listed underneath for each div if that helps):

<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

check this jsfiddle link

you code has a syntax errror

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

div is missing a closing tag..i have corrected it and it working

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

Answer 2

I think this is what you're after, if so then you really weren't far off! I've thrown together a jsFiddle example so you can play around, or instruct me further if I'm off your requirement and I'll try to improve it.

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

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

Answer 3

If I understand you correctly it looks like you're on the right path, you just need to make sure you only hide under the right circumstance. The easiest way to achieve this would likely be to add a variable to store the state and set it to true in your event listener function. Something along the lines of putting openedWithClick = true in your onClick handler, possibly adding a check for mouse entered as well depending on your scenario. You also likely want to use mouseout() rather than mouseleave() . If this isn't your problem you may need to clarify what exactly is going on with your sample code and how it differs from what you expect to happen.