如何捕獲使用jquery點擊的子鏈接？

Question

我試圖捕獲事件，當點擊一個子元素鏈接並添加一個名爲「highlightchild」的類。另外我想檢查是否存在任何子元素鏈接，如果沒有子元素退出，即「第三級」突出顯示「父母突出顯示」。我如何使用jQuery來做到這一點？

$(document).ready(function() { 
    $('.menu ul').hide(); 
    $('.menu .arrowUp').click(function() { 
    $('.menu ul').hide(); 
    $(this).find(".third-level").toggle(); 
    }); 
}); 

HTML

<ul class="menu"> 
<li class="arrowUp"><a href="#">link1</a> 
<ul class="third-level" >    
<!-- third level non-active --> 
    <li class="arrowUp"><a href="/somelink/">Some Link</a></li> 
</ul> 
</li> 
<li class="arrowUp"><a href="#">link2</a> 
<ul class="third-level" >    
<!-- third level non-active --> 
    <li class="arrowUp"><a href="/links2/">some Links 2</a></li> 
</ul> 
</li> 
<li class="arrowUp"><a href="#">link3</a> 
<ul class="third-level" > 
<!-- third level non-active --> 
    <li class="arrowUp"><a href="/Agri/">Agricultural</a></li> 
    <!-- third level non-active --> 
     <li class="arrowUp"><a href="/sugar/">Sugar</a></li> 
    <!-- third level non-active --> 
     <li class="arrowUp"><a href="/bbc/">Coffee</a></li> 
     <!-- third level non-active --> 
     <li class="arrowUp"><a href="/cnn/">Energy</a></li> 
     <!-- third level non-active --> 
     <li class="arrowUp"><a href="funstuff">Fun stuff</a></li> 
    </ul> 
</li> 
<li class="arrowUp"><a href="#">link4</a></li> 
<li class="arrowUp"><a href="#">link5</a></li> 
<li class="arrowUp"><a href="#">link6</a></li> 
</ul> 

Answer 1

// add hightlightChild class to children anchor tags on click 
$('.parent_link > a').click(function(){ 
    $(this).addClass('highlightChild'); 
    return false; // or not if you want to follow the link 
}); 

// loop over each parent link and highlight it if no children links exist 
$('.parent_link').each(function(){ 
    if ($(this).children('a').size() > 0){ 
    $(this).addClass('highlightParent'); 
    } 
}); 

Answer 2

如何：

$(".arrowUp > a").bind("click", function(event) { 
    event.preventDefault(); 
    if ($(this).closest(".third-level").length > 0 || 
     $(this).siblings().length === 0) { 
     $(this).addClass("highlight"); 
    } 
}); 

與父母所有的鏈接與third-level類，或鏈接，沒有兄弟姐妹a秒。

http://jsfiddle.net/andrewwhitaker/bMupR/

編輯：沒有注意到你想不同的父/子亮點類，這裏是你會怎麼做：

$(".arrowUp > a").bind("click", function(event) { 
    event.preventDefault(); 
    if ($(this).closest(".third-level").length > 0) { 
     $(this).addClass("childhighlight"); 
    } 
    else if ($(this).siblings().length === 0) { 
     $(this).addClass("parenthighlight"); 
    } 
}); 

http://jsfiddle.net/andrewwhitaker/bMupR/1/

Answer 3

不知道你是什麼意思與你的第二部分（可以重述和/或澄清？），但我會用.delegate()：

$('ul.menu').delegate('a', 'click', function() { 
    $('ul.menu .highlightchild').removeClass('.highlightchild'); 
    $(this).addClass('.highlightchild'); 
}); 

這隻能將一個事件處理程序添加到菜單的根目錄。