Question

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

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

我想添加功能，以便仅在

时隐藏子菜单

1）将鼠标移至主菜单

2）如果页面向下滚动

这是代码

$(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>

CSS

html, body {

text-align: center;
margin: 0px;
height: 100%;
width: 100%;
}
    #wrap {
margin-left: auto;
margin-right: auto;
width: 100%;
position: relative;
background: url(body.png) center no-repeat;
min-height: 10px;
  }
    #body-image {
margin-top: 60px;
    }

   #main-nav {
margin: 0px 0px 0px 2px;
text-align: center;
min-height: 25px;
padding-top: 10px;
padding-left: 0px;
    width: 100%;
  }

 #main-handle {
width: 605px;
float: right;
margin-top: -1px;
   }

  #main-nav li {
display: inline;
list-style: none;
   }

  #main-nav li a {
margin-right: 5px;
font-size: 15px;
text-decoration: none;
color: #f2f2f2;
font-family: Arial, Helvetica, sans-serif;
text-transform: uppercase;
font-weight: bold;
padding: 10px;
outline: 0;
position: relative;
top: -2px;
   }

   #main-nav li a:hover, #main-nav li a.active {
background: #587;
 }

   #sub-link-bar {
background: #907;
min-height: 10px;
border-bottom: #645546 1px solid;
 }

 .sub-links {
display: none;
position: absolute;
width: 100%;
top: -30px;
text-align: left;
left: 0px;
     }

   #main-nav li .sub-links li a:hover{
background: #2d2620;
 }

  #main-nav li a.close{
display: none;  
position: absolute;
 }

  #main-nav li a.close:hover{
background: #900;
 }

 .round {
 display:block
 }

 .round * {
display:block;
height:1px;
overflow:hidden;
font-size:.01em;
background:#645546
    }

 .round1 {
 margin-left:3px;
 margin-right:3px;
padding-left:1px;
padding-right:1px;
border-left:1px solid #443a30;
 border-right:1px solid #443a30;
background:#56493c
  }

 .round2 {
margin-left:1px;
margin-right:1px;
padding-right:1px;
padding-left:1px;
border-left:1px solid #322a23;
border-right:1px solid #322a23;
background:#594c3e
  }

 .round3 {
margin-left:1px;
margin-right:1px;
border-left:1px solid #594c3e;
border-right:1px solid #594c3e;
 }

   .round4 {
border-left:1px solid #443a30;
border-right:1px solid #443a30
    }

 .round5 {
border-left:1px solid #56493c;
border-right:1px solid #56493c
 }

 .roundfg {
background:#645546
 }

请回复。感谢。

Answer 1

您不需要在外部定义mouseLeave事件，因为.hover(mouseEnter,mouseLeave)在其列表中提供。

http://api.jquery.com/hover/和http://www.w3schools.com/jquery/event_hover.asp

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

保持子菜单打开和关闭鼠标按下或页面滚动

1）将鼠标移至主菜单

2）如果页面向下滚动

1 个答案: