0

メニューの項目の上にマウスを置いたときに表示されるサブメニューを作成したいと考えています。マウスがサブメニューから離れたときにサブメニューを非表示にするという問題に直面しています。たとえば、マウスがウェブサイトの下部または右側または左側に移動するなどです。

これが私のメニューのスクリプトです。jsfiddle http://jsfiddle.net/2jUQS/1/でメニューのサンプルを作成します

<div id="header">
   <ul id="menu">
    <li>
        <a href="#" class="wordsMenu">About Company</a>
    </li>
    <li>
        <a href="#" class="galaryMenu">Gallary</a>
    </li>

 </ul>
</div>
    <div id="submenus">
         <div id="galarySubMenu" class="subMenuContainer">
    <ul class="subMenuList">
        <li><a href="PhotoGallery.php">Photo Gallary</a></li>
        <li><a href="videoGallery.php">Video Gallary</a></li>
    </ul>
</div>

</div>

そしてここにスクリプトがあります

$("document").ready(function(){


  $("a.wordsMenu").bind( 'mouseover',function(){
    $("#galarySubMenu").fadeOut("fast");
  });

 $("a.galaryMenu").bind( 'mouseover',function(){


    $("#galarySubMenu").css("display","block");
    var margin_top = $("#header").height();
    var testMarginTop=parseInt($("#galarySubMenu").css("top"));
    if(testMarginTop<0){
        $("#galarySubMenu").animate({
            'top':margin_top-2
        }, {
        'duration':500,
        queue:false
    });
    }
    else{
        $("#galarySubMenu").animate({
            'top':'-300'
        },  {
        'duration':500,
        queue:false
    });
    }
});

/*
 $(".subMenuList").mouseout(function(){
      $("#galarySubMenu").fadeOut("fast");
});
*/

 });
4

1 に答える 1

0

これをjqueryコードに追加します

    $("#submenus").on('mouseleave',function(){
        $("#galarySubMenu").animate({
                'top':'-300'
            },  {
            'duration':500,
            queue:false
        })
    })

お役に立てれば

サブメニュー div 全体にハンドラを追加したところ、mouseleaves するとフェードアウトします

于 2012-04-13T22:07:58.643 に答える