jQuery在mouseout上隐藏div

我在这个项目上看到很多帖子，但找不到合适的解决方案。对不起，如果它已经在某个地方回答。jQuery在mouseout上隐藏div

我想要什么： 我有我的菜单项DIV，当click事件被触发的href元素的打开。现在我想隐藏菜单，当鼠标不在DIV元素中，并且不在href元素之上时。到目前为止，我只能点击href元素才能关闭它。

所以，我的jQuery的是这样的：

$("#menu_opener").click(function() { 
      if ($("#menudiv").is(":hidden")) { 
       $("#menudiv").slideDown("slow"); 
      } else { 
       $("#menudiv").hide(); 
      } 
     });

我的HTML看起来像这样：

<div> 
<a href="#" id="menu_opener">Menu</a> 
</div> 
<div id="menudiv" style="position: fixed; background-color: white; display: none;"> 
    <a href="#" id="A1">Page 1</a><br /> 
     <a href="#" id="A2">Page 2</a><br /> 
    <a href="#" id="A3">Page 3</a><br />       
</div>

提前感谢！

来源

2011-07-07 Jorelie

编辑：对不起，第一次误读了这个问题。我不得不这样做几次，并且我总是将菜单向上移动一个像素，以便它与href元素重叠。然后，如果href或href元素被徘徊，则显示/隐藏菜单。

$("#menu_opener, #menudiv").hover(
    function(){ 
     $("#menudiv").show(); 
    }, 
    function(){ 
     $("#menudiv").hide(); 
    } 
);

，并为menudiv的风格顶部属性，因此它向上移动并重叠在href。

<div> 
    <a href="#" id="menu_opener">Menu</a> 
</div> 
<div id="menudiv" style="position: fixed; top: -1px; background-color: white; display: none;"> 
    <a href="#" id="A1">Page 1</a><br /> 
    <a href="#" id="A2">Page 2</a><br /> 
    <a href="#" id="A3">Page 3</a><br />       
</div>

来源

2011-07-07 20:06:43

woops，误读的问题。编辑答案。 –

这个解决方案很好，谢谢。 – Jorelie

如果我明白了“是不是在href元以上”一块，你想要的菜单鼠标移动关闭的div＃menudiv时保持可见，但仍然将鼠标悬停在一个＃menu_opener？

如果是这样的话，我会把整个东西包装在一个unqiue div中，并将其作为目标。并在mouseout上使用mouseleave。

http://api.jquery.com/mouseleave/

所以，你的HTML变为：

<div id="menu_container"> 
    <div> 
    <a href="#" id="menu_opener">Menu</a> 
    </div> 
    <div id="menudiv" style="position: fixed; background-color: white; display: none;"> 
    <a href="#" id="A1">Page 1</a><br /> 
    <a href="#" id="A2">Page 2</a><br /> 
    <a href="#" id="A3">Page 3</a><br />       
    </div> 
</div>

和你的脚本会是这样的：

$("#menu_opener").click(function() { 
    if ($("#menudiv").is(":hidden")) { 
     $("#menudiv").slideDown("slow"); 
    } else { 
     $("#menudiv").hide(); 
    } 
}); 
$("#menu_container").mouseleave(function(){ 
    $('#menudiv').hide(); 
});

来源

2011-07-07 20:17:37

有了一些额外的CSS定位这个解决方案完美的工作！ – Jorelie

你可以保持HTML的是，只需添加以下内容：

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

jsFiddle：http://jsfiddle.net/5SSDz/

来源

2011-07-07 20:24:03

很好的答案，但它有点错误。当您翻转单词测试，然后将鼠标移动到右侧时，然后重新测试，然后再往下 - 有一些奇怪的行为。我不知道如何解决它，只是让你知道它的一个小车。 –

@JaydenLawson我会建议你使用CSS来代替javascript。我对鼠标事件的经验是，它们不是100％可靠的。你可以使用一些CSS3转换效果。我相信你可以在Google上找到一些东西，我不是一个CSS人，所以不能帮助CSS代码。 – harsimranb

jQuery在mouseout上隐藏div

回答

相关问题