Question

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

我的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。

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

首先，您改变了出现的方式，以便它可以与修改不透明度和显示css属性的fadeOut函数匹配（将不透明度更改为1并显示为无）
Seconde one，您改变了消失的方式，因此您删除了fadeOut，而是使用自定义动画功能将您的设置更改为原始设置。

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

2 个答案: