Question

这是菜单的代码。

(document).ready(function(){

$("#main-nav li a.main-link").hover(function(){
$("#main-nav li a.main-link").removeClass("active");                                                 
    $(this).addClass("active");                                      
    $("#sub-link-bar").animate({
        height: "40px"                     
    });
    $(".sub-links").hide();
    $(this).siblings(".sub-links").fadeIn();

});


   $("#main-nav").mouseleave(function(){    

    $("#main-nav li a.main-link").removeClass("active");                                                                                     
    $(".sub-links").fadeOut();
    $("#sub-link-bar").animate({
        height: "10px"                     
    });           
   });
});

HTML代码

       <div id="sub-link-bar"> </div>

      <div id="wrap">

        <div class="roundfg">
  <ul id="main-nav">
    <li><a class="main-link" href="#">Home</a>
        <ul class="sub-links">
            <li><a class="main-link" href="#">Home</a></li>
        </ul>
    </li>
    <li><a class="main-link" href="#">Tutorials</a>
      <ul class="sub-links">
        <li><a href="#" >Design</a> </li>
        <li><a href="#">HTML &amp; CSS</a> </li>
        <li><a href="#" >Other</a> </li>
        <li><a href="#">PHP</a> </li>
        <li><a href="#">Ruby</a> </li>
        <li><a href="#">Site Builds</a> </li>
        <li><a href="#">Tools &amp; Tips</a> </li>
        <li class="cat-item cat-item-35"><a href="#">Wordpress</a> </li>
      </ul>
    </li>


    <li><a class="main-link" href="#">Videos</a>
        <ul class="sub-links">
        <li><a href="#">Screencasts</a> </li>
        </ul>
    </li>
    <li><a class="main-link" href="#">About</a>
        <ul class="sub-links">

        </ul>
    </li>         
  </ul>
</div>

当鼠标离开主菜单时，子菜单会隐藏。

但如果鼠标位于子菜单上，则子菜单也会隐藏。

所以我想添加功能，以便仅在

时隐藏子菜单

1）将鼠标移至主菜单

2）如果页面向下滚动

请回复。感谢。

在悬停时保持子菜单打开，在鼠标向下移动或滚动时关闭子菜单

0 个答案: