0

メニューストリップがあります。私は計画しました：

  1. slideDown()メニューストリップの上にマウスを置いたときのサブメニュー (もともとはdisplay: noneDIV )
  2. マウスアウトでサブメニューを非表示にslideUpします。

コードは次のとおりです。

<div id="main_menu" onmouseover="$('#submenu').stop(true,false).slideDown();" onmouseout="$('#submenu').stop(true,false).slideUp();">Main Menu</div>
<div id="submenu" style="display: none">Some submenu contents here</div>

私が達成しようとしているのは、サブメニューにマウスオーバーすると、サブメニューが保持され、マウスアウトを停止することです（slideUp()アニメーション。どうすれば達成できますか？

注: main_menuとsub_menuが重複していないことを前提としています。

更新: ここにjsFiddleがあります

4

2 に答える 2

2

親 dom を追加し、それにマウス イベントをバインドするのが簡単な方法です。

html

<div id="menu">
    <div id="main_menu">Main Menu</div>
    <div id="submenu" style="display: none">Some submenu contents here</div>
</div>

js

$('#menu').hover(function () {
    $('#submenu').stop(true, false).slideDown();
},

function () {
    $('#submenu').stop(true, false).slideUp();
});

ここにjsfiddleのデモがあります。http://jsfiddle.net/vyDVd/

アップデート

親DOMを追加したくない場合は、子メニューとして入れsubmenuてみてください。main_menu

ここで jsfiddle デモを更新します http://jsfiddle.net/9KfYr/2/

#submenuUI を変更しないように 2 つの css 属性を追加します。

position:absolute;
top:30px;

ここでは、jQuery が提供する.hover()を使用することをお勧めします。

于 2013-01-23T04:15:25.933 に答える