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

回答

相關問題