ヘッダーの背景画像の展開/折りたたみを設定する

Question

アコーディオンの折りたたまれたヘッダーと展開されたヘッダーに別の背景イメージを設定しようとしています。どのように私がこれを達成できるかについての助けを提供してください。

のjQuery：

$(document).ready(function() { $('ul#accordion a.heading').click(function() { 

     if($(this).parent().hasClass('current')) {   
      $(this).siblings('ul').slideUp('normal',function() { 
       $(this).parent().removeClass('current'); 
      }); 
     } else { 
      $('ul#accordion li.current ul').slideUp('normal',function() { 
       $(this).parent().removeClass('current'); 
      }); 
      $(this).siblings('ul').slideToggle('normal',function() { 
       $(this).parent().toggleClass('current'); 
      }); 

     } 
     return false; 
    }); }); 

HTML：

<ul id="accordion"> 

    <li id="AR" class="current"> 
     <a href="#" class="heading">ALL RESOURCES</a> 
     <ul>resource options</ul> 
    </li> 


    <li id="BU"> 
     <a href="#" class="heading">BUREAUS</a> 
     <ul>bureaus options</ul> 
    </li> 

    <li id="BN"> 
     <a href="#" class="heading">BUSINESS NEEDS</a> 
      <ul>business options</ul> 
    </li> 

</ul><!-- END ACCORDION --> 

はCSS：

ul#accordion li a.heading { background-color: blue; } 
ul#accordion li a.headingactive { background-color:red; } 

私は私のアコーディオンは、ヘッダのみのクリック機能をカバーしていることを知っているが、私ならば、私は思っていました準備機能を組み込むこともできます。どの見出しが展開されていても、それは "headingactive"というクラスを受け取ります。

Answer 1

li要素ごとに現在のクラスが取得されている場合は、セレクタul＃accordion li.current a.heading（あまり具体的ではありません）でスタイルを設定できるので、実際には新しいクラスは必要ありません。