jQuery 导航菜单 mouseover 和 mouseout 第二次不起作用

Question

我正在用 jQuery 开发一个导航菜单。我来到了可以向下滑动第一个子菜单并向右滑动第二个子菜单的步骤。当我 mouseout 它会淡出。但问题是当我第二次将鼠标悬停时。它不会工作。第一次悬停它工作正常。我无法识别问题。我认为鼠标移出功能在执行后不会停止或完全返回。谁能给我一个关于这个问题的建议

我的 jQuery 代码

  <script type="text/javascript">
       $(document).ready( function() {
           jQuery('.box1').mouseover(function() {
            ///$(".box2").stop().slideDown('slow');
                $('.box2').stop().animate({
                   height: 50
                }, 1000);
            });

            jQuery('.box1').mouseout(function() {
               $('.box2').stop().fadeOut();
               // $(".box2").stop().slideUp('slow');
            });

              jQuery('.box4').mouseover(function() {
              // $(".box3").stop().slideDown('slow');
              //$(".box3").show('slide', {direction: 'left'}, 800);

              $('.box3').stop().animate({
                     width: 200
                  }, 1000);
          });

          jQuery('.box4').mouseout(function() {
              //$(".box3").stop().slideUp('slow');
              // $(".box3").hide('slide', {direction: 'left'}, 800);
              $('.box3').stop().fadeOut();
          });
          });   
</script>

我的 HTML 代码

<ul >
  <li class="box1"  >
    <div  class="box_sub" >Home</div>
    <ul>
      <li style="float:left;" class="box4"   >
        <div  id="box2" class="box2"  style="float:left">Sub 1.0</div>
        <ul style="float:left;">
          <li id="box3" class="box3"  style="float:left;clear:none;"  > Sub Sub 1.1</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

我的 CSS 代码

    .box_sub { 
       width: 200px;
       height: 50px;
       background-color: #0066CC;
       color: #FFF;
       text-align: center; 
       line-height: 50px;
       font: Verdana, Geneva, sans-serif;
       font-size: 14px;
       padding-top: 20px;
       padding-bottom: 20px;
       cursor: pointer;
    }
    .box2 {
       width: 200px;
       height: 0px;
       background-color: #0066CC;
       color: #FFF;
       text-align: center; 
       line-height: 50px;
       font: Verdana, Geneva, sans-serif;
       font-size: 14px;
       cursor: pointer; 
    }
   .box3 {
       width: 0px;
       height: 50px;
       background-color: #0066CC;
       color: #FFF;
       text-align: center; 
       line-height: 50px;
       font: Verdana, Geneva, sans-serif;
       font-size: 14px;
       padding-top: 20px;
       padding-bottom: 20px;
       cursor: pointer; 
   }
   .box1 {
       min-width: 200px;
   }
   ul { 
      list-style: none;
   }
   ul {
      margin: 0;
      padding: 0;
   }
   li {
      margin: 0;
      padding: 0;
   }

My jsFiddle link is here..

Answer 1

你想要的代码太多

Try This Working Fiddle

$("#nav li").hover(
    function(){
        $(this).children('ul').hide();
        $(this).children('ul').slideDown('slow');
    },
    function () {
        $('ul', this).slideUp('slow');            
    });

Answer 2

您的问题如下：

您的框以 0 的高度/宽度开始。 然后，通过将它们的高度/宽度更改为您想要的值来使它们出现。 之后，您使用 jQuery 函数 fadeOut，它不会改变高度或宽度。 然后，您重新修改了高度/宽度，但实际上，您根本没有更改任何内容，因为您已经在第一次这样做了，但是您没有从 jQuery 中删除 fadeOut。

所以我认为你有两个解决方案：

• 第一个，你改变你的显示方式，使它可以与fadeOut 函数匹配，该函数同时修改不透明度和显示css属性（将不透明度更改为1并显示为无）
• 第二个，你改变了消失的方式，所以你删除了fadeOut，而是使用自定义动画功能，将你的设置改回原来的设置。