JQ Menu

by Pralhad Sonar

HTML

<html>
  <body>
    <ul id="main-menu">
      <li class="sub-menu"> Home
        <ul class="nested-sub-menu">
          <li class="nested-sub-menu-list">Link 1</li>
          <li class="nested-sub-menu-list">Link 2</li>             
          <li class="nested-sub-menu-list">Link 3</li>
          <li class="nested-sub-menu-list">Link 4</li>     
        </ul>
      </li>
      <li class="sub-menu">
        About Us
      </li>
    </ul>
  </body>
</html>

CSS

.active{
  background-color: red;
  }

JavaScript

/*
(function ($) {
  $('ul#main-menu li.nested-sub-menu-list').click(function () {
    $(this).closest('li:not(".sub-menu")').addClass('active').removeClass('active');
  });
})(jQuery);
*/
/*
(function ($) {
  $('ul#main-menu li.nested-sub-menu li').click(function () {
    $(this).addClass('active');
  });
})(jQuery);
*/
/*
(function ($) {
  $('ul#main-menu').on('click' , 'li.nested-sub-menu-list', (function (e) {
    $(e.target).addClass('active').siblings().removeClass('active');
  });
})(jQuery);
*/
(function ($) {
  $('ul#main-menu').on('click', 'li.nested-sub-menu-list', (function (e) {
    $(e.target).addClass('active').siblings().removeClass('active');
  }));
})(jQuery);