Jquery 仅在菜单中将类添加到父项

我正在处理一个菜单，我只想通过jquery向父菜单项添加一个类。我为它编写的代码运行良好，但只有在菜单项没有任何子元素（下拉菜单）的情况下才能运行。现在，我应该做哪些更改，以便仅在悬停时将类添加到父项

这是html

<nav id="main-menu" style="display: block;">
  <ul id="menu-nav_menu" class="nav sf-js-enabled">
    <li class="menu-item cat-item">
      <a href="http://localhost/carp/?page_id=45" class="sf-with-ul">
        <span class="main_text">About CARP</span>
      </a>
      <ul class="sub-menu" style="display: none; visibility: hidden;">
        <li id="menu-item-41" class="menu-item">
          <a href="http://localhost/carp/?page_id=40">Vision</a>
        </li>
      </ul>
    </li>
    <li class="menu-item">
     <a href="http://localhost/carp/?page_id=48" class="sf-with-ul">
       <span class="main_text">Our Work</span>
     </a>
     <ul class="sub-menu" style="display: none; visibility: hidden;">
      <li class="menu-item">
        <a href="http://localhost/carp/?page_id=50">How To</a>
      </li>
    </ul>
  </li>
  <li class="menu-item">
   <a href="http://localhost/carp/?page_id=79">
     <span class="main_text">Gallery</span></a>
   </li>
   <li class="menu-item">
    <a href="http://localhost/carp/?page_id=81">
      <span class="main_text">Contact Us</span></a>
    </li>
  </ul>
</nav>

---

这可能无法满足您的需要。。但是改进jquery。。您不需要在那里使用

mouseout（）

试试这个

$(document).ready(function(){

  //to change the background image of previous closest menu item background
  $("#main-menu ul#menu-nav_menu li a").hover(function(e) {
     e.preventDefault();
     var i = $("#main-menu ul li a span").index($(this).parent() );
     $('#main-menu li a span').eq(i-1).addClass('mybg');
  },function(){
     var i = $("#main-menu ul li a span").index($(this).parent() );
     $('#main-menu li a span').eq(i-1).removeClass('mybg');
  });


});

---

我假设您希望在主菜单项或其子菜单项上发生悬停事件时突出显示主菜单项。最简单的方法是使用CSS：

#menu-nav_menu > li:hover > a { background-color: #FF0000; }

---

由于您希望使用jQuery执行此操作：

jQuery

$(function () {
    $('#menu-nav_menu > li').hover(function() {
        $(this).children('a').toggleClass('myBg');
    });
});

CSS

---

您的悬停事件结构不正确，请参阅以了解正确用法

---

以下是供您参考的示例。

使用jQuery parent（）；可能会产生一些结果。你能编辑我的代码吗？我试过了，但没有成功。你可以把你的代码放在JSFIDLE中吗？用代码的精简部分创建一个。这是什么样的FIDLE+1对于代达罗斯来说，它奏效了。我采取了艰难的步骤，我应该改进我的jqery。顺便说一句，我对它是新的。感谢每一位onethnx的友好回应。当然，我需要改进jquery

$(function () {
    $('#menu-nav_menu > li').hover(function() {
        $(this).children('a').toggleClass('myBg');
    });
});

.myBg { background-color: #FF0000; }