0

Web サイトの上部に水平ナビゲーション バーがあります。2 つのオプションには、クリックするとドロップダウンし、再度クリックすると非表示になるサブメニューがあり、javascript を使用します。それぞれのサブメニューが表示されると、これら 2 つのオプションのそれぞれの色が変わり、再び非表示になると元に戻るようにしたかったのです。

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 を使用して表示されます。親アイテムをクリックしてサブメニューを表示すると、親アイテムがグレーに変わります...もう一度クリックしてサブメニューを非表示にすると、オレンジに戻ります。また、ある親アイテムから別の親アイテムをクリックすると、最初の親アイテムもオレンジ色に戻るようにしたいと考えています。

4

1 に答える 1

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

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

});

CSS

.splendid{
  super-attribute : here ;
}

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

于 2013-01-05T11:06:32.417 に答える