2011-05-18 12 views
2

私はslideDown/slideUpに少し問題があります。私は私がオーバーメニューマウスのサブメニューを表示することですacchieveしようとしているものを内部サブメニューとメニューを持っている、と私はこのようにそれをやっている:jQuery slideDown/slideUp問題

<script type="text/javascript"> 
$(document).ready(function(){ 
     $("#menu>li>ul").hide(); 
     $("ul#menu>li a").mouseover(function(){      
      $(this).next("ul").slideDown('1000'); 
      $(this).next("ul").addClass("current_submenu");  
     }); 
     $(".submenu>li").click(function(){       
      $(".current_submenu").slideUp('1000');   
     }); 
}); 
</script> 
<ul id="menu"> 
      <li><a class="album" id="beauty-fashion" href="#">Beauty/Fashion</a> 
       <ul> 
        <li><a href="#">Beauty 1</a></li> 
       </ul> 
      </li>    
      <li><a class="album" id="covers" href="#">Covers</a></li> 
      <li><a class="album" id="editorial" href="#">Editorial</a></li> 
      <li><a class="album" id="advertising" href="#">Advertising</a></li> 
      <li><a class="album" id="fx" href="#">FX</a></li> 
      <li><a class="album" id="portraits" href="#">Portraits</a></li> 
      <li><a class="album" id="taly" href="#">Taly</a></li> 
      <li><a class="disabled" href="#" id="previousImage">Previous</a></li> 
      <li><a href="#" id="toggleAnimation">Pause</a></li> 
      <li><a class="disabled" href="#" id="nextImage">Next</a></li> 
</ul> 

サブメニューが滑り落ちるが、私はそれからスライドアウトをもう一度しないでmouseoutを行うとき。 ¿私が間違っていることは何ですか?

あなたの助けを借りてくれてありがとう!

答えて

2

このJavaScriptは動作するはずです:

$(document).ready(function(){ 
    $("#menu>li>ul").hide(); 
    $("ul#menu>li").hover(function(){      
     $(this).find("ul").slideDown(200).addClass("current_submenu"); 
    }, function(){ 
     $(this).find("ul").slideUp(200).removeClass("current_submenu"); 
    }); 
}); 

は、MouseEnterイベントとmouseleaveの省略形であるかについて学ぶために http://api.jquery.com/hover/を見てみましょう。

slideUpとslideDownの時間が文字列として挿入されていることに気付きました。あらかじめ定義された時間は、整数でなければなりません。

0

メニューを閉じるには、mouseoutイベントに関数をバインドする必要があります。

1

あなたは、このスクリプトを試みることができる:

$(document).ready(function(){ 
    $("#menu>li>ul").hide(); 
    $("#menu>li>ul>li").click(function(){ 
     $(this).slideUp(1000).removeClass("submenu"); 
    }); 
    $("ul#menu>li").hover(function(){      
     $(this).find("ul").slideDown(1000).addClass("submenu"); 
    }); 
});