Change Font Color When Clicking On Menu With Jquery

I want to change the item color and its parent when clicking on the menu and sub-menu. like this menu. but when I click on sub-menu, the color of the parent menu is removed.

Solution 1:

$('li a').click(function () {
  // reset all 
  $('ul.nav a').removeClass('active');

  $(this).addClass('active');

  $(this).parents('li').find('a').filter(function () {
    return !$(this).closest('ul').hasClass('dropdown-menu');
  }).addClass('active');

  // or// $(this).parents('li').find('a.dropdown-toggle').filter(function () {//    return !$(this).closest('ul').hasClass('dropdown-menu');// }).addClass('active');  
});

Example-1

Example-2

Solution 2:

Its a little dirty, I would suggest a better classing structure that might make targeting easier.

$('#navbar-collapse-grid a').click(function (e) {    
  // Removes all active classes
  $('#navbar-collapse-grid a').removeClass('active');

  $(this).closest('ul').parents('.dropdown').find('a').addClass('active');

  $(this).addClass('active');
});

http://codepen.io/anon/pen/PwoyYN