Question

当我将鼠标悬停在菜单链接（class =“menu1”）上时，我使用jquery hover来显示子菜单（id =“submenu1”）。

我使用过这段代码：

sp = $('img[class="menu1"]');
pn = $('#submenu1');   
sp.hover(function(){
  pn.show();
},
function(){
  setTimeout(function(){pn.hide();}, 500);
});

pn.hover(function(){
  pn.show();
},
function(){
   pn.hide();
});

问题是，我希望子菜单保留以防用户悬停在它上面。有时它有效，有时没有.. 我看过几个例子，其中没有一个适合我......

修改

子菜单不在菜单层次结构中（它绝对定位）

<!--menu btn to hover above:-->
<img src="menu.gif" alt="menu" />

<!--completly unrelated submenu:-->
<div id="submenu" >
...
</div>

Answer 1

也许这段代码可以帮到你。

JS：

$("img[id^='menu']").hover(function(){
  $("div[id^='submenu']").hide();
  $("#sub" + $(this).attr("id")).show();
},
function(){
    var it = this;

    setTimeout(function(){
      var submenu = $("#sub" + $(it).attr("id"));

      if(submenu.length > 0 && !submenu.is(":hover")){
        submenu.hide();
      }
    }, 200);
});

$("div[id^='submenu']").hover(function(){
},
function(){
  $(this).hide();
});

$("div[id^='submenu']").hide();

HTML：

<!--menu btn to hover above:-->
<img src="http://www.stackoverflow.com/favicon.ico" alt="menu1" id="menu1" height="30"/>
<img src="http://www.stackoverflow.com/favicon.ico" alt="menu1" id="menu2" height="30"/>
<img src="http://www.stackoverflow.com/favicon.ico" alt="menu1" id="menu3" height="30"/>
<img src="http://www.stackoverflow.com/favicon.ico" alt="menu1" id="menu4" height="30"/>


<!--completly unrelated submenu:-->
<div id="submenu3" >
This is a submenu3
</div>

<div id="submenu2" >
This is a submenu2
</div>

<div id="submenu4" >
This is a submenu4
</div>

使用此代码，您有时可以找到小错误。问题来自setTimeout。如果你太慢，则隐藏子菜单。困难来自DOM组织，但你可以假设它。

Here有一个jsfiddle来测试代码。

jquery悬停菜单

1 个答案: