Question

我正在开发一个jQuery导航菜单。在主菜单悬停时，我添加了一个jQuery代码来滑下子菜单。但是当光标移动到子菜单时，它会自动向上滑动。我试图想出一个if-else子句的逻辑。但是没能成功。任何人都可以使用jQuery以任何其他方式提供任何建议。

这是我的jQuery代码

    <script type="text/javascript">
    var box1_Active=false;
        var box2_slideDown = false;
        var box3_slideRight=false;

       $(document).ready(function(){

             $('#state1').text(box2_slideDown);  
             $('#state2').text(box3_slideRight);


             jQuery('.box1').mouseover(function() {
box1_Active=true;
                //if(a == false && b == true && c == false){$(".see2").hide('slide', {direction: 'left'}, 800);} 

            $(".box2").slideDown('slow');
                    box2_slideDown=true;
                 $('#state1').text(box2_slideDown);  
             $('#state2').text(box3_slideRight);

            });


            jQuery('.box1').mouseout(function() {
                    if(box2_slideDown==true && box1_Active==true ){}
        if(box2_slideDown==true && box3_slideRight==false ){$(".box2").slideUp('slow');}
            if(box2_slideDown==true && box3_slideRight==true ){
        $(".box3").hide('slide', {direction: 'left'}, 800);
            $(".box2").slideUp('slow');

    }
            });





            });

</script>

这是我的CSS样式

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

ul{list-style:none;}
ul
{
margin: 0;
padding: 0;
}

li
{
margin: 0;
padding: 0;
}

这是我的HTML代码

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

My jsFiddle link to this

Answer 1

不需要额外的变量和额外的if / else条件......你需要的是jquery.stop()。它会停止匹配元素上当前正在运行的动画

试试这个

 $(document).ready(function () {

   jQuery('.box1').mouseover(function () {
       $(".box2").stop().slideDown('slow');

    });


    jQuery('.box1').mouseout(function () {

            $(".box3").hide('slide', {
                direction: 'left'
            }, 800);
            $(".box2").stop().slideUp('slow');


    });

});

fiddle

在子菜单中将鼠标悬停向上滑动

1 个答案: