jquery show hide單鏈接菜單 - 無法隱藏在鼠標外面

<html> 
<head> 
<script src="jquery.js" type="text/javascript"></script> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     $(".link").click(function(){ 
      $(".myList").show(); 
      $(".link1").click(function(){ 
       $(".myList").hide(); 
      }); 
     }); 
    }); 
</script> 
</head> 
<body> 
<div class="myDiv"> <a href="#." class="link">Text</a> 
<div class="mylist" style="display:none;"> <a href="#." class="link1">Text</a> <a href="#." class="link1">Text</a> <a href="#."class="link1">Text</a> </div> 
</div> 
</body> 
</html>

我想在鼠標上隱藏列表面板，當前我可以在點擊任何鏈接時隱藏它，但是也希望它在鼠標上也可以隱藏。jquery show hide單鏈接菜單 - 無法隱藏在鼠標外面

來源

2011-09-28 UID

我想你應該添加：attr或CSS，而不是隱藏（） – sansknwoledge

@sansknwoledge爲什麼呢？ – Andy

他爲什麼要那樣做？ – JNDPNT

只需將鼠標點擊事件更改爲mouseout ;-)。

$(".link1").mouseout(function(){ 
    $(".myList").hide() 
}

來源

2011-09-28 09:23:20 JNDPNT

$(".link").click(function(ev){ 
    $(".myList").show(); 
    ev.preventDefault(); 
}); 
$(".link1").mouseout(function(){ 
    $(".myList").hide(); 
});

你有一個錯字太多：MYLIST & myList中

嘗試。

$(".link").click(function(ev){ 
    $(".myList").show(); 
    ev.preventDefault(); 
}); 
$(".myList").mouseleave(function(){ 
    $(".myList").hide(); 
});

來源

2011-09-28 09:25:31 Andy

謝謝安迪，它工作，但仍然不完美。即使我的鼠標在myList div它隱藏面板。它只能在我將鼠標移出該div時隱藏。 – UID

@Sachin更新了我的答案 – Andy

這是完美的工作，謝謝安迪... – UID

嘗試用這個代替http://jsfiddle.net/G28aH/3/

來源

2011-09-28 09:29:23 Wahtever

嘗試

$('.myList').mouseout(function() { $(this).hide(); });

來源

2011-09-28 09:34:01 alh84001

如果你不使用動畫我認爲這是更好地使用CSS：hover僞類完成這個任務。但是，如果你想使用jQuery，那麼使用mouseout事件。但爲了防止下拉消失，在移動它時應該將事件綁定到.myDiv上。

$('.myDiv').mouseout(function(){ 
    $(".myList").hide() 
})

此外，你可以嘗試hoverIntent插件，這是完美的我的需求。它延遲顯示和隱藏以防止意外消失。

http://cherne.net/brian/resources/jquery.hoverIntent.html

來源

2011-09-28 11:32:14

jquery show hide單鏈接菜單 - 無法隱藏在鼠標外面

回答

相關問題