CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user3839473
user3839473

Reputation: 23

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.

$('li a').click(function() {

  $(' li a').removeClass('active'); {
    $(this).parent('a').addClass('active');
    $(this).addClass('active');

  }

});
.active {
  color: #DC0000 !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="navbar-collapse-grid" class="navbar-collapse collapse">
  <ul class="nav navbar-nav">
    <li class="dropdown yamm-fw">
      <a href="#" data-toggle="dropdown" class="dropdown-toggle">main menu<b class="caret"></b></a>
      <ul class=" navbar-nav dropdown-menu">
        <!-- Grid 12 Menu -->
        <li class="dropdown yamm-fw">
          <a href="#" data-toggle="dropdown" class="dropdown-toggle">menu1<b class="caret"></b></a>
          <ul id="menu1" class="dropdown-menu">
            <li class="grid-demo">
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

Upvotes: 1

Views: 1407

Answers (2)

Oleksandr T.
Oleksandr T.

Reputation: 77482

$('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

Upvotes: 1

sixlive
sixlive

Reputation: 34

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

Upvotes: 0

Related Questions