Question

我想在点击菜单和子菜单时更改项目颜色和它的父项。 like this menu。但是当我点击子菜单时，会删除父菜单的颜色。

<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>

 <script>

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

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

        }

    });

</script>

.active{  
   color:#DC0000 !important;
}

Answer 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

Answer 2

它有点脏，我会建议一个更好的分类结构，可以使目标更容易。

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

使用jquery单击菜单时更改字体颜色

2 个答案: