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 に答える