单击时更改链接的颜色并在再次单击时更改回来

Question

我的网站顶部有一个水平导航栏。其中两个选项具有子菜单，单击时会下拉，再次单击时会隐藏，使用 javascript。我想让这两个选项中的每一个在其各自的子菜单显示时都会改变颜色，然后又变回它们被隐藏起来。

HTML 结构：

<ul id="navigationbar">
  <li><a id="parentitem1">Option 1</a></li> 
     <nav id="dropdownmenu1">
       <ul>
         <li><a id="childitem 1a">sub-option 1a</a></li>
         <li><a id="childitem 1b">sub-option 1b</a></li>
         <li><a id="childitem 1c">sub-option 1c</a></li>
       </ul>   
     </nav>  
  <li><a id="parentitem2">Option 2</a></li>   
     <nav id="dropdownmenu2">
       <ul>
         <li><a id="childitem 2a">sub-option 2a</a></li>
         <li><a id="childitem 2b">sub-option 2b</a></li>
         <li><a id="childitem 2c">sub-option 2c</a></li>
       </ul>   
     </nav>   
</ul> 

当父项被按下时，带有子项的导航部分会使用 javascript 显示。我想这样做，当我单击父项以显示其子菜单时，父项变为灰色……当您再次单击它以隐藏其子菜单时，它又变为橙色。我还想这样做，以便当您从一个父项单击另一个父项时，它也会将第一个父项更改回橙色。

Answer 1

$('#super_horizontal_bla').find('.super_toggler').click(function(){

  $('.splendid').removeClass('splendid');
  $(this).toggleClass('splendid');

});

CSS

.splendid{
  super-attribute : here ;
}

http://api.jquery.com/toggleClass/