Question

我有一个菜单，我试图让子菜单在鼠标悬停时淡入，并在mouseleave上淡出。我已经尝试了几种解决方案，其中大部分导致菜单在悬停时立即淡出，而不是在mouseleave / mouseout上。下面的代码是我认为最有意义的代码。但结果是菜单淡入，但不淡出。

<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>

Answer 1

这可能会对您有所帮助，但您似乎在检查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>

Answer 2

可能是额外的'。'在获取鼠标离开功能的子菜单。我用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();
  });
});

在mouseout上淡出，而不是在悬停时淡出

2 个答案: