jQuery-单击子元素但突出显示父级？

Question

I have a html code like this:

<ul>
    <li class="curent"><a href="home.html">Home</a></li>
    <li>
        <a href="javascript:void(0)">Products</a>
        <ul class="sub">
           <li><a href="samsung.html">Samsung</a></li>
           <li><a href="lenovo.html">Lenovo</a></li>
         </ul>
    </li>
    <li><a href="catalog_grid.html">News</a></li>
</ul>

http://img38.imageshack.us/img38/5795/70a.png

I want to click any a tag and li tag parent is hightlighted. I try this code but it doesn't work with a tag in ul has sub class:

var this_url = window.location.href;

$('#block_nav_primary ul li').each(function() {
    if ($(this).children().attr('href') == this_url) {
        $('#block_nav_primary ul').find('li[class="curent"]').removeClass('curent');
        $(this).addClass('curent');
    }
});

Can anyone point me in the right direction here?

Thanks for your help!

P/S: it looks like this thread Highlight Parent Link in Navigation Menu With Jquery

Answer 1

Try this:

$("ul a").click(function () {
    $(this).parent().parent().addClass("blue");
});

or

$("ul a").click(function () {
    $(this).closest("ul").addClass("blue");
});

CSS in both cases:

.blue > a {
   color: blue;
}

JSFiddle to a quite similar scenario.

Answer 2

I'm not sure I quite understand your wording, but you want to apply the same effect to all LI tags, including those in a sublist?

Replace this:

$('#block_nav_primary ul li').each(function() {

With this:

$('#block_nav_primary ul').find('li').each(function() {

Answer 3

Try

val items = $('#block_nav_primary ul li').click(function(){
    items.filter('.current').removeClass('current');
    $(this).addClass('current')
})

Answer 4

Why don't you try styling it such that the A tag takes the width of the entire LI tag and so when you click A tag, it would highlight the entire thing. The CSS code for it would be something like:

li a {display: block; width: 100%; padding: 10px 0; background-color: pink;}
li a:hover {background-color: orange;}