jquery - 将鼠标悬停在另一个菜单上时关闭打开的子菜单

Question

我有一个菜单，里面有一个子菜单。当您将鼠标悬停在主菜单上时，子菜单将打开。当您单击子菜单时，子菜单保持打开状态，因为它被赋予了“on”类。我想要的是，如果用户将鼠标悬停在另一个主菜单部分上，则子菜单会在下面的菜单部分关闭并在他们悬停的菜单部分打开。

 <div class="sideMenu2">
    <ul>
        <li><a href>retail</a>
             <ul class="subsideMenu2">
               <li><a href="/portfolio/8/0">the elements</a></li>
               <li><a href="/portfolio/9/0">bullring</a></li>
               <li><a href="/portfolio/10/0">braehead</a></li>
             </ul>
        </li>
        <li ><a href class="on">sports &amp; leisure</a>
               <ul class="subsideMenu2">
                      <li class= "on"><a href="/portfolio/19/0">the rose bowl</a></li>
                           <li><a href="/portfolio/48/0">alton towers pool</a></li>
               </ul>
        </li></ul>

CSS:

.sideMenu ul li.on a
{
    height:2em;
    padding-top: 2px;
    background:url(../images/point.png) no-repeat;
    font-weight:bold;   
}

.sideMenu ul
{    
    padding: 15px 0px 0px 0px;  
    list-style-type:none;
    font-size:1em;
    width:20em;
    color:#fff;   
    margin-left:-10px;
}

.sideMenu ul a{
    padding: 2px 20px 0px 0px;  
    color:#fff;
    text-decoration:none;
    float:left;
    width:19.2em;
}

.sideMenu li a
{
    height:2em;
    padding-top: 1px;
    padding-left:15px;
}

.sideMenu li a:hover{
    background:url(../images/point.png) no-repeat;
    cursor:pointer; 
    padding-left:-15px;
}

.sideMenu h4{
    display:none;
}

.sideMenu2 ul li.on a
{
    height:2em;
    padding-top: 2px;   
/** font-weight:bold;   **/
}

a.on 
{    
   background:url(../images/point.png) no-repeat;
}

.sideMenu2 ul
{    
    padding: 15px 0px 0px 0px;  
    list-style-type:none;
    font-size:1.1em;

    color:#fff;   
    margin-left:-10px;
}

.sideMenu2 ul a{
    padding: 2px 20px 0px 0px;  
    color:#fff;
    text-decoration:none;
    float:left;
    width:16.6em;
}

.sideMenu2 li a
{
    height:2em;
    padding-top: 1px;
    padding-left:15px;
}

.sideMenu2 li a:hover{
    background:url(../images/point.png) no-repeat;
    cursor:pointer; 
    padding-left:-15px;

}

.sideMenu2 ul ul
{    
    display:none;
}
.sideMenu2 li:hover .subsideMenu2 {
  display: block;
}

.sideMenu2 li .subsideMenu2 {
  padding: 15px 0px 0px 20px;   
    list-style-type:none;
    font-size:0.8em;
    width:20em;
    color:#fff;   
    margin-left:-10px; 
}

.sideMenu2 li .subsideMenu2 li.on a
{
    height:2em;
    padding-top: 2px;
    background:url(../images/point.png) no-repeat;
/** font-weight:bold;**/    
    display:block;
}

http://jsfiddle.net/uzi002/LSZBg/9/

Answer 1

您需要确保为您的菜单项指定了一个类。不要使用 .sideMenu ul li，只需使用 li.main_menu_item 或其他东西:

$(function() {
   $('li.main_menu_item').hover(function() {
      // Hide all open sub-menus
      $('li.main_menu_item').removeClass('on');

      // Show only this menu item's sub-menu
      $(this).addClass('on');
   });
});