slideDown / slideUp AND Поворот изображения

Question

Я недавно взял на себя проект с большим количеством пользовательских js.Одна из вещей, над которой я работаю, - это сложенное меню, которое расширяется вниз - это, по сути, аккордеон, - но оно написано немного по-другому.У меня есть значок шеврона, который поворачивается на 90 градусов при открытии элемента, а затем поворачивается назад, когда элемент закрыт.У меня это отлично работает:

{
    this.subj.find(".category .ctitle").click(
        function()
        {
            $(this).children(".gold-ra").toggleClass("down");
            if($(this).next(".tlists").is(":visible")) {
                $(this).next(".tlists").slideUp("slow");

            } else {
               $(this).next(".tlists").slideDown("slow");
            }

Однако проблема, с которой я сталкиваюсь, заключается в том, что если пользователь щелкнет до завершения действия слайда, вращение шеврона будет не синхронизировано сэлемент открывает закрытие (т. е. он указывает вниз, когда элемент закрыт).

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

Я использую CSS, чтобы вращать изображение классом вниз.Есть ли лучший способ добиться желаемой синхронизации слайда и поворота?

.gold-ra {
    padding-right: 30px;
    background: url("/view/liveassets/svg/RightArrowG.svg")no-repeat;
    background-size: 16px 16px;
    -moz-transition: all 100ms linear;
    -webkit-transition: all 100ms linear;
    transition: all 100ms linear;
    height: 17px;
    float: left;
    position: relative;
    top: 2px;
}

.gold-ra.down {
         -moz-transform:rotate(90deg);
        -webkit-transform:rotate(90deg);
        transform:rotate(90deg);
        transform-origin: top center;
        position: relative;
        top: 19px;
}

Answer 1

Переключение .down перед вашей логикой if / else может вызвать вашу проблему.Поскольку у вас уже есть логика для управления открытыми аккордеонами, вы можете добавить туда же логику добавления и удаления для шеврона.

if($(this).next(".tlists").is(":visible")) {
  $(this).next(".tlists").slideUp("slow");
  $(this).children(".gold-ra").removeClass("down");
} else {
  $(this).next(".tlists").slideDown("slow");
  $(this).children(".gold-ra").addClass("down");
}