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

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 に答える