0

マウスオーバーでサブメニューをフェードインさせ、マウスオーバーでフェードアウトさせようとしているメニューがあります。私はいくつかの解決策を試しましたが、それらのほとんどは、マウスリーブ/マウスアウトではなく、ホバーするとすぐにメニューがフェードアウトする結果になりました。以下のコードは、私が最も理にかなっていると私が信じているコードです。しかし、その結果、メニューはフェードインしますが、フェードアウトしません。

<script type="text/javascript">
$(document).ready(function(){

      //When hovering a top-level link, submenu fadein. 
      $('.toppunkt a').mouseenter(function(){
      $('ul.sub-menu').fadeIn();
      });

      //When leaving the submenu, fadeout.  
      $('.ul.sub-menu').mouseleave(function(){
      $('ul.sub-menu').fadeOut();
      });
});
</script>
4

2 に答える 2

2

これはあなたを助けるかもしれないし、助けないかもしれませんが、あなたはmouseleaveで間違った項目をチェックしているようです...

http://jsfiddle.net/Mutmatt/3ppr8/14/

さらに良いことに、このメニューシステムをおそらく動作させたい方法は、次のjsfiddleのようになります。

http://jsfiddle.net/Mutmatt/3ppr8/23/

それを見てください。将来の参考のために正解をマークすることを忘れないでください

コード：JS：

jQuery(document).ready(function() {
    jQuery('#topmenu li').hover(
        //When hovering a top-level link, submenu fadein. 
        function() {
            jQuery('ul', this).stop().fadeIn();
        },
        //When leaving the submenu, fadeout.  
        function() {
            jQuery('ul', this).stop().fadeOut();
        }
    );
});​

HTML：

<ul id="topmenu">
    <li><a href="yep">yep</a>
        <ul class="sub-menu" style="display: none;">
            <li><a href="derp">derp</a></li>
            <li><a href="yerp">yerp</a></li>
        </ul>
    </li>
</ul>​
于 2012-09-24T18:35:44.480 に答える
1

余分な「。」である可能性があります マウスの脱退機能でサブメニューを取得します。私はdivを使用してソリューションを作成しました。

これがフィドルです：http： //jsfiddle.net/PAWQr/12/

うまくいけば、これがお役に立てば幸いです。

HTML：

<div  class="toppunkt">
    <a href="" action="">Here is a list</a>
    <div class="sub-menu" style="width:70px; border: 1px dotted gray; display: none;">    
        <ul>
            <li>Option1</i>
            <li>Option2</i>
        </ul>
    </div>       
</div>

脚本：

$(document).ready(function(){

  //When hovering a top-level link, submenu fadein. 
  $('.toppunkt a').mouseenter(function(){
      //alert('mouse enter');
      $('.sub-menu').fadeIn();
  });

  //When leaving the submenu, fadeout.  
  $('.sub-menu').mouseleave(function(){
      $('.sub-menu').fadeOut();
  });
​});
于 2012-09-24T18:58:05.293 に答える