1

我正在开发一个 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>

我的 jsFiddle 链接到这个

4

1 回答 1

0

不需要额外的变量和额外的 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');


    });

});

小提琴

于 2013-07-14T17:33:03.663 回答