Jquery 将鼠标悬停在其他菜单上时关闭“打开”子菜单

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

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

---

您可以使用一个函数绑定悬停事件，该函数在所有具有on类的项上循环，并使用jquery将其删除，您可以使用此对象设置当前悬停项以将其项设置为on，如果您发布了用于执行此菜单的javascript，我可以帮您做到这一点，或者，您可以将代码示例放在fiddler上，您需要确保菜单项具有类。不要使用.sideMenu ul li，只需使用li.main\u menu\u项或其他内容：

$(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');
   });
});

---

你是如何达到这个效果的？通过CSS还是Jquery？为我们提供执行悬停效果的代码，这样我们可以更好地为您提供一个可以帮助的答案，因为有几种方法可以使用CSS和jQuery的各种方法或两者的组合来进行翻滚/悬停效果。在询问您的问题时，考虑使用jsFIDDL.NET。它真的帮助人们快速创建一个工作解决方案。编写JSFIDLE中的代码，这将为我们提供一些可以使用的东西。我使用了css，而且如果用户离开悬停状态，这意味着on类需要重新绑定到ti的来源？抱歉，我不知道你的问题的含义

$(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');
   });
});