0

私は、プライマリナビゲーションの一部のリンクに個別のサブメニューがあるサイトを開発中です。これは珍しいことではありません。

しかし、私はサブメニューの可視性を制御しようとしています。サブメニューのあるリンクにカーソルを合わせると、サブメニューが下にスライドします。カーソルが移動して別のサブメニューとの別のリンクにカーソルを合わせると、同じ効果が発生するはずですが、新しく要求されたサブメニューを下にスライドする前に、開いているサブメニューを非表示にしようとしています。

私は次のコードを使用しています：

jQuery(document).ready(
    function(){
        jQuery('div#block-system-main-menu div.content ul li.leaf').mouseover(
            function(){
                //jQuery('div.view-referenced-product-categories').slideUp();
                jQuery(this).find('div.view h3').slideDown();
            }
        );
    }
);

そのコードを使用すると、スライドダウンは正常に機能しますが、複数のサブメニューが開いてしまいます。マウスオーバー関数のコードの最初の行のコメントを外すと、スライドダウン効果が機能しません。

説明のために、サイトはhttp://hoffmann-koree.com/にあります。サブメニューの2つのリンクは、バスルームとステーショナリーです。

誰かが私が間違っていることやおそらくより良いテクニックを教えてもらえますか？

4

2 に答える 2

0

slideDown()のコールバックに入れてみてくださいslideUp()

var menu = this;
jQuery('div.view-referenced-product-categories').slideUp(500, function (){
    jQuery(menu).find('div.view h3').slideDown();
});

このように、が完了したslideDown()ときにのみ呼び出されslideUp()ます。（デフォルトの速度であるため、速度に500msを設定しましたが、メニューを非表示にする速度を高速化した方がよい場合があります）

于 2012-04-30T15:10:51.167 に答える
0

なぜマウスリーブを使わないのですか？

jQuery('div#block-system-main-menu div.content ul li.leaf').mouseover(
    function(){
        jQuery(this).find('div.view h3').slideDown();
    }
);
jQuery('div#block-system-main-menu div.content ul li.leaf').mouseleave(
    function(){
        jQuery(this).find('div.view h3').slideUp();
    }
);

ソース コードを確認しました。追加する場合は、hoffmannkoree.js を編集し、4 ～ 16 行を上記のスニペットに置き換えてください。

于 2012-07-04T05:02:04.110 に答える