Установить развернуть / свернуть фоновые изображения на заголовках - PullRequest
Новая
       1

Установить развернуть / свернуть фоновые изображения на заголовках

0 голосов
/ 28 июня 2011

Я пытаюсь установить другое фоновое изображение для свернутых и развернутых заголовков на гармошке. Пожалуйста, помогите, как я могу это сделать.

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

1 Ответ

0 голосов
/ 29 июня 2011

Если в то же время каждый элемент li получает текущий класс, новый класс вам действительно не нужен, так как вы можете стилизовать его с помощью селектора ul # accordion li.current a.heading (чтобы быть слишком конкретным).

...