jQuery活动的父级li在单击子级li

Question

I'm trying to add active class to parent li after clicking on link in child li . I have drop down menu, on my drop down menu HTML code is in following website: http://www.dawntravels.com/

I've tried this code without success:

<script>
    $(".arrow_carrot-2right").click(function (e) {
         e.preventDefault();
         $(this).closest('li').addClass('selected'); // I also tried .parent().addClass
    });
</script>

Answer 1

<ul class="arrow_carrot-2right">
    <li><a href="#">Home</a></li>
     <li><a href="#">Services</a></li>
     <li><a href="#">Contact Us</a></li>
</ul>

$('.arrow_carrot-2right > li').click(function () {    
$(this).addClass('selected').siblings().removeClass('selected');
});

.selected{
    background-color:green;
}

http://jsfiddle.net/bS75H/

Answer 2

As your class arrow_carrot-2right applied in <i> not on anchor tag so try this,

$('ul.sf-menu li a').on('click',function(e){
   e.preventDefault();
   $(this).closest('li').addClass('selected');
});

Answer 3

Try:

//get the current URL
var url = window.location;
//after the link has been clicked and page loaded,
//find the clicked anchor tag using the loaded page name
$('.sf-menu a').filter(function() {
   return this.href == url;
//add the 'active' class to the outermost parent <li> of the matched <a> tag
}).parents("li").addClass('active');