1

jQuery サブ メニュー ドロップダウンを作成しようとしています。

メニューリンクボタンをホバーし、サブメニューに入って終了すると、コードは正常に機能します。

ただし、メニューリンクボタンをホバーしてから別のメニューボタンをホバーすると、サブメニューが消えることはありません。

私はそれをしたい...

  1. リンクボタンにカーソルを合わせるとサブメニューが表示されます。
  2. いずれかをホバーしている間、アクティブなボタンのリンクとサブメニューを表示し続けます。
  3. ボタンまたはサブメニューを終了するときは、アクティブなメニュー ボタンとサブメニューの両方をオフにします (ただし、サブメニューを終了してアクティブなボタンに入るときはオフにしないでください)。

それが理にかなっていることを願っています！

ここに私のHTMLがあります：

<ul class="mainmenu">
    <li><a href="">normal</a></li>
    <li class="menudrop"><a href="">dropdown</a></li>
</ul>

<div class="submenu">
    <h3>Aliquam id libero</h3>
    <ul>
       <li><a href="">Vestibulum in purus</a></li>
       <li><a href="">Lectus id vestibulum</a></li>
       <li><a href="">Suspendisse posuere</a></li>
       <li><a href="">Nam ut bibendum</a></li>                                  
   </ul>
</div>

そして、ここに私が使用しているjQueryがあります：

$(function() {  
$(".menudrop").hover(
    function () {
        $(".submenu").show();
    }       
 );         
$(".submenu").hover(
    function () {
        $(".menudrop").addClass("active");
        $(".submenu").show();
    },
    function () {
        $(".menudrop").removeClass("active");
        $(".submenu").hide();
    }
 );         
});

また、最初に CSS でサブメニューを表示しないように設定しました。

.submenu {
position: absolute;
z-index: 2000;
width: 970px;
display: none;
}
4

1 に答える 1

1

.menudrop にカーソルを合わせるとサブメニューがアクティブになりますが、そのままにしてもサブメニューは非アクティブにならないため、通常の状態に戻ってメニューを開くことができます。

サブメニューにカーソルを合わせると、アクティブになり、離れると非表示になりますが、通常に戻ろうとすると、.menudrop に再び表示されます

cssを追加するとよくわかります

.mainmenu li {表示: インライン}

サブメニューを .menudrop 内に配置し、メニュー ドロップを使用して .hover enter/leave で表示/非表示を切り替えることをお勧めします。最終的には、フォーマットの目的で追加の div を使用することになります。

ここでフィドルを参照してください：http://jsfiddle.net/m2Gfe/2/

マウスが .menudrop から .submenu に移行するときのメニュー間にまだグリッチがあります。サブメニューを非表示にする可能性がありますが、パディングとオーバーラップによって少し解決できます。

于 2012-07-02T23:52:11.353 に答える