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

你可以用一个函数绑定hover事件，该函数循环所有具有“on”类的项目并使用jquery删除它，你可以使用“this”对象设置当前的悬停项目，将它的项目设置为“on” “，如果您发布了用于执行此菜单的javascript，我可以帮助您这样做，或者您可以将代码示例放在fiddler上

Answer 2

您需要确保您的菜单项目是一个课程。不要使用.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');
   });
});

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

2 个答案: