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

Question

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

0

У меня есть аккордеон, который я создал с помощью jQuery UI. Мне нужны значки шеврона, которые указывают вверх или вниз в зависимости от того, открыт ли раздел или закрыт. Проблема заключается в моем 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 -->

thomasp423 24 сен. 2013, в 18:04

Источник

Теги:

javascript

jquery

jquery-ui

jquery-ui-accordion

1 ответ

Ещё вопросы

Axel · Accepted Answer · 2013-09-24T12-53-00.000Z

Вам нужно ссылаться на это, чтобы он переключил элемент, на который вы нажимаете (не все из них сразу). Если у вас $(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'); }

Что, если бы я хотел, чтобы у меня были классы вверх и вниз? Но начни с этого. Прямо сейчас это поднимает за пределы промежутка.
Вот что я смотрю по умолчанию при загрузке i.imgur.com/PGtFu4Z.png
Я обновил код в своем ответе. Вы можете добавить .down ко всем из них при загрузке страницы, используя $(".section a .chevron").addClass('down');