0

当悬停在菜单链接（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>
4

1 回答 1

0

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

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 组织，但你假设它。

这里有一个jsfiddle来测试代码。

于 2012-09-19T15:46:07.847 回答