Значок шеврона, указывающий вверх или вниз в зависимости от положения аккордеона

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

Jquery

$(function() {

     $(".section a").click(function() {

          $(".chevron").removeClass("chevron").addClass("up");
    });
});

CSS

.chevron {
background: url("images/down.png") no-repeat;
}

.up {
background: url("images/up.png");
}

HTML

 <div class="section">
   <a href="#"><div class="tab active">
   <span class="chevron"></span><h3>Section 1</h3>
   </div></a> <!-- tab -->

javascript jquery jquery-ui jquery-ui-accordion
person thomasp423    schedule 24.09.2013    source источник
comment
Добавьте jsfiddle, если это возможно.   -  person Alvaro    schedule 24.09.2013
comment
Я запутался, но код, который я вставил в jsfiddle, имеет рабочие шевроны. Я предполагаю, что это из пользовательского интерфейса jquery. Почему у меня нет их на моей рабочей копии локально? jsfiddle.net/thomasp423/pcf5d   -  person thomasp423    schedule 24.09.2013

Ответы (1)


arrow_upward
2
arrow_downward

Вам нужно сослаться на это, чтобы он переключал элемент, на который вы нажимаете (не все сразу). Получив $(this), вы можете использовать .find для поиска шеврона в ссылке.

Наконец, вы можете использовать toggleClass для переключения между состояниями класса. Это позволяет многократно щелкать ссылку и переключать ее между состояниями класса.

$(function() {
    //Add down to all .chevrons
    $(".section a .chevron").addClass('down'); 

    //Toggle up/down classes
    $(".section a").click(function() {
        var $chevron = $(this).find('.chevron');                
        $chevron.toggleClass("down up");
    });
});

Затем для CSS установите для классов правильное изображение шеврона:

.chevron.up { background-image('images/up.png'); }
.chevron.down { background-image('images/down.png'); }
person Axel    schedule 24.09.2013
comment
Что, если бы я хотел иметь переключатель класса вверх и вниз. Но начните с него. Прямо сейчас это ставит вне пролета. - person thomasp423; 24.09.2013
comment
Я обновил код в своем ответе. Вы можете добавить .down ко всем из них при загрузке страницы, используя $(".section a .chevron").addClass('down'); - person Axel; 24.09.2013