javascript - 用 javascript 和 jquery 和 ul 制作下拉菜单

Question

我有一张我想要的图像，当我将鼠标悬停在它上面时，ul必须显示一个，当我离开时ul它必须关闭ul。

HTML：

<img id="ro" src="setting.png" onmouseover="rotate()" style="width:20px;height:20px;border:none;"/>
<br />
<ul id="settings" style="position:fixed;" onmouseout="hj()">
  <li><a href="#">111</a></li>
  <li><a href="#">222</a></li>
  <li><a href="#">333</a></li>
  <li><a href="#">444</a></li>
</ul>

当我将鼠标悬停在图片上时，图片旋转 360 度，然后显示ul.

JS：

function show(n) {
var tds = $("#settings li") ;
setTimeout(function(){ tds.eq(n).fadeIn(500); }, n*100);
}

当我从ul运行此代码中取出鼠标时：

function hj() {
var tds = $("#settings li");
for (var i = tds.length - 1; i > -1; i--) {
    hide(i) ;
}
}

如果我再次将鼠标悬停在图片上，图片再次旋转并ul使用以下代码关闭：

function hide(n) {
var tds = $("#settings li");
setTimeout(function() { tds.eq(tds.length - n - 1).fadeOut(500); }, n*100);
}

但是当ul打开时，当我进入第 3 或第 4 个元素（第 3 或第 4 个li）时，ul关闭。哪里错了？

Answer 1

事件mouseout冒泡。您应该使用 jQuery 以编程方式注册事件（也可以查看http://api.jquery.com/mouseleave/）和/或取消hj处理程序中事件的冒泡。