新手jQuery祖先導航問題

道歉的基本問題，但我想添加一個懸停狀態的導航列表，似乎無法計算出如何有一個懸停狀態而不影響父母<li>。父母<li>在技術上也被盤旋。我知道.add/removeClass()更爲理想，但對於我的測試來說，使用.attr()更容易。新手jQuery祖先導航問題

到目前爲止我有：

我有一個在的jsfiddle http://jsfiddle.net/gSPkj/成立，但下面是代碼 -

HTML的

<div id="sidebarNav"> 
<ul> 
    <li class="parent"><a href="page1.html">Page 1</a></li> 
    <li class="parent"><a href="page2.html">Page 2</a></li> 
    <li class="parent"><a href="page3.html">Page 3</a></li> 
    <li class="parent"><a href="page4.html">Page 4</a> 
     <ul> 
      <li class="child"><a href="subpage_of_4-2.html">Subpage of 4 - 1</a></li> 
      <li class="child"><a href="subpage_of_4-2.html">Subpage of 4 - 2</a></li> 
     </ul> 
    </li> 
</ul>

的jQuery -

$("#sidebarNav li.parent").hover(function(){ 
$(this).attr("style","background:#123de1;color:#eb9028;"); 
},function(){ 
$(this).attr("style","background:#fff;color:#000;"); 
}); 
$("#sidebarNav li.child").hover(function(){ 
$(this).attr("style","background:#123de1;color:#eb9028;"); 
$(this).parents(".parent").attr("style","background:#fff;color:#000;"); 
},function(){ 
$(this).attr("style","background:#fff;color:#000;"); 
});

來源

2013-01-25 ggdx

看一看這個帖子 - http://stackoverflow.com/questions/1327711/jquery-hover-event-with-nested-elements –

定位錨點然後找到最接近的li元素來附加樣式會更容易。我會做這樣的：

$("#sidebarNav li > a").on('mouseenter mouseleave', function(e) { 
    $(this).closest('li').css({ 
     background: (e.type == 'mouseenter' ? '#123de' : '#fff'), 
     color: (e.type == 'mouseenter' ? '#eb9028' : '#000') 
    }); 
});

FIDDLE

來源

2013-01-25 14:48:13 adeneo

完美！謝謝@ adeneo。 – ggdx

你可以用CSS這樣做只是

a:hover { 
    background: #123de1; 
    color: #eb9028; 
}

修改JSFiddle

如果你真的需要使用Javascript，你可以使用event.stopPropagation()

防止事件冒泡DOM樹，阻止任何父處理程序被通知事件。

$("#sidebarNav li.child").hover(function(e){ 
    e.stopPropagation(); 
    $(this).attr('style','background:#123de1;color:#eb9028;'); 
},function(e){ 
    e.stopPropagation(); 
    $(this).attr('style','background:#000;color:#fff;'); 
});

雖然這仍然有問題，從孩子搬到父母或倒退時。

修改JSFiddle

來源

2013-01-25 14:49:48

新手jQuery祖先導航問題

回答

相關問題