jQueryサブナビゲーション可視性を交互に

Question

私は、メインナビゲーション内のいくつかのリンクが個別のサブメニューを持つサイトを開発中です - 何も珍しいことはありません。

しかし、私はサブメニューの表示を制御しようとしています。カーソルがサブメニュー付きのリンク上を移動すると、サブメニューはスライダダウンする必要があります。カーソルが別のサブメニューと異なるリンク上を移動する場合、同じ効果が起こるはずですが、私は新たに要求されたサブメニューをスライドさせる前に開いているサブメニューを隠そうとしています。 、そのコードで

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(); 
      } 
     ); 
    } 
); 

私slidedownが正常に動作しますが、私はオープン、複数のサブメニューで終わる：

私は、次のコードを使用しています。私がmouseover関数でコードの最初の行のコメントを外すと、私のスライダダウン効果は機能しません。

説明すると、サイトはhttp://hoffmann-koree.com/です。サブメニュー付きの2つのリンクはバスルームと固定です。

誰かが私が間違っているか、おそらくよりよい技術を教えてもらえますか？

Answer 1

がslideUp()

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

のコールバックでこの方法をslideDown()を入れてみてくださいslideUp()が完了すると、slideDown()にのみ呼び出されます。 （私はそれがデフォルトのものであるので、500msのスピードを取ったが、メニューを隠す速度を上げる方が良いかもしれない）

Answer 2

なぜmouseleaveを使用しないのですか？

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を交換してください。