Question

我正在开发一个菜单，我只想通过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

$(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');
    $("#main-menu ul li a").mouseout(function() {
        $('#main-menu li a span').eq(i-1).removeClass('mybg');
    });

});

Answer 1

我假设你想要在它或它的子节点上发生悬停事件时突出显示主菜单项。最简单的方法是使用CSS：

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

CSS Fiddle

因为你想用jQuery做到这一点：

的jQuery

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

CSS

.myBg { background-color: #FF0000; }

jQuery Fiddle

您的悬停事件结构不正确，请参阅jQuery API docs了解正确用法。

以下是CSS Selectors spec供您参考。

Answer 2

这可能不会给你你需要的东西..但改善你的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');
  });


});

仅在菜单中向父项添加类

2 个答案: