只在菜單中爲父項添加一個類

我正在使用一個菜單，我只想通過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'); 
    }); 

});

來源

2013-04-05 Kashif Waheed

使用jQuery parent（）;可能會產生一些結果。 – Daniel 2013-04-05 05:49:16

你可以編輯我的代碼我試過但沒有運氣 – 2013-04-05 05:50:17

你可以把你的代碼放入jsFiddle嗎？ – 2013-04-05 05:56:53

這可能不會給你所需要的..但改善你的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-05 06:18:21 bipen

thnx爲你的善良反應。當然我需要提高我的jquery – 2013-04-05 06:48:39

歡迎.. :) ..很高興它幫助...快樂的編碼.. – bipen 2013-04-05 06:53:13

我假設你想在它或它的孩子發生懸停事件時突出顯示主菜單項。既然你想使用jQuery做

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

CSS Fiddle

：

jQuery的

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

CSS

做到這一點最簡單的方法是使用CSS

jQuery Fiddle

您的懸停事件結構不正確，請參閱jQuery API docs的正確使用。

以下是CSS Selectors spec供您參考。

來源

2013-04-05 06:26:32

它的工作，我採取了艱難的步驟，我應該改善我的jqery我是事實新的感謝它的方式。謝謝大家 – 2013-04-05 06:47:15

只在菜單中爲父項添加一個類

回答

相關問題