0

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

});
4

2 回答 2

1

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

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

CSS小提琴

既然你想用 jQuery 来做：

jQuery

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

CSS

.myBg { background-color: #FF0000; }

jQuery小提琴

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

这是供您参考的CSS 选择器规范。

于 2013-04-05T06:26:32.070 回答
0

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


});
于 2013-04-05T06:18:21.063 回答