1

我正在用 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;
   }

我的 jsFiddle 链接在这里..

4

2 回答 2

3

你想要的代码太多

试试这个工作小提琴

$("#nav li").hover(
    function(){
        $(this).children('ul').hide();
        $(this).children('ul').slideDown('slow');
    },
    function () {
        $('ul', this).slideUp('slow');            
    });
于 2013-07-15T09:55:32.523 回答
1

您的问题如下：

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

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

  • 第一个，你改变你的出现方式，以便它可以与fadeOut修改不透明度和显示css属性的函数匹配（将不透明度更改为1并显示为无）
  • 其次，您更改了消失的方式，因此您删除fadeOut并改为使用自定义动画功能，将您的设置更改回原始设置。
于 2013-07-15T08:22:11.037 回答