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/

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

1 个答案: