jQuery ẩn div trên mouseout

Question

Tôi thấy nhiều bài đăng trên mục này nhưng không thể tìm thấy giải pháp phù hợp. Xin lỗi nếu nó đã được trả lời ở đâu đó.

Những gì tôi muốn: Tôi có một DIV với mục trình đơn của tôi, mở ra khi sự kiện click là bắn của một phần tử href. Bây giờ tôi muốn ẩn menu, khi con chuột ra khỏi phần tử DIV và không nằm trên phần tử href. Cho đến nay tôi chỉ có thể đóng nó khi tôi nhấp vào phần tử href.

Vì vậy, jQuery của tôi trông như thế này:

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

Và HTML của tôi trông như thế này:

<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> 

Cảm ơn trước!

Answer 1

Chỉnh sửa: Xin lỗi đã đọc câu hỏi lần đầu tiên. Tôi đã phải làm điều này một vài lần, và tôi luôn chuyển menu lên một pixel để nó chồng lên phần tử href. Và sau đó hiển thị/ẩn menu nếu href hoặc href yếu tố đang được lơ lửng.

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

Và đặt thuộc tính hàng đầu cho phong cách của menudiv để di chuyển lên và chồng chéo lên trên.

<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> 

Answer 2

nếu tôi hiểu được "không phải là trên các yếu tố href" mảnh, bạn muốn menu để ở lại có thể nhìn thấy khi rê chuột khỏi div # menudiv, nhưng vẫn di chuyển chuột qua một # menu_opener ??

nếu trường hợp đó xảy ra, tôi sẽ quấn toàn bộ thứ đó vào một div phi thường và nhắm mục tiêu đó. và sử dụng mouseleave trên mouseout.

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

vậy, HTML của bạn trở thành:

<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> 

và kịch bản của bạn sẽ là một cái gì đó như:

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

Answer 3

Bạn có thể giữ cho HTML như là và chỉ cần thêm những điều sau đây:

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

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