Изображение не меняется, когда оно падает обратно (jquery, css)

Question

Изображение изменится при расширении, но когда оно снова свернется, оно не изменится, мой код выглядит следующим образом:

JS:

(function ($) {
    $(document).ready(function () {

        // Categories menu opening
        $('.woocommerce.widget_product_categories .product-categories li.cat-parent').prepend('<div class="cat-menu-close"></div>');

        $(document).on("click", ".woocommerce.widget_product_categories .product-categories li.cat-parent > .cat-menu-close", function (e) {
            var $catParent = $(this).closest('li.cat-parent');
            var state = $catParent.hasClass('close');

            $catParent.toggleClass('opened', !state);

            $(this).nextAll('ul.children:first').slideToggle(state);

        });

    });
})(jQuery);

CSS:

.woocommerce.widget_product_categories .product-categories li .cat-menu-close {
     position: absolute;
     right: 0;
     line-height: 20px;
     text-align: center;
     cursor: pointer;
     top: 4px;
     width: 20px;
     height: 20px;
}
 .woocommerce.widget_product_categories .product-categories li > .cat-menu- close:hover {
     opacity: 0.5;
}
 .woocommerce.widget_product_categories .product-categories li > .cat-menu- close:after {
     display: inline-block;
     margin-left: 2px;
     background: url("../img/arrow-right.svg") no-repeat center center;
     background-size: 20px 20px;
     width: 10px;
     height: 20px;
     content: "";
}
 .woocommerce.widget_product_categories .product-categories li.opened > .cat- menu-close:after {
     background: url("../img/arrow-down.svg") no-repeat center center;
     background-size: 20px 20px;
}

Может ли кто-нибудь помочь? Мне нужно изменить изображение, когда оно расширяется и сворачивается, спасибо и высоко ценю.

Answer 1

проблема в том, что категория даже после SlideUp остается такой же

class="cat-item cat-item-69 cat-parent opened"

вместо возврата в исходное состояние

class="cat-item cat-item-69 cat-parent"

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

теперь, если вы удалите "!" из

$catParent.toggleClass('opened', !state);

изображение вообще перестанет двигаться, так как не изменит состояние.

отредактированный ответ ниже

Хорошо, я разгадал загадку

После небольшого количества проб и ошибок у меня есть ваш ответ. В вашем коде у вас есть это:

        var $catParent = $(this).closest('li.cat-parent');
        var state = $catParent.hasClass('close');

        $catParent.toggleClass('opened', !state);

эта часть кода устанавливает начальное состояние "закрыть"

        var state = $catParent.hasClass('close');

и при нажатии вы получаете состояние "открыто" с помощью

        $catParent.toggleClass('opened', !state);

Это не дает вам возможность вернуться к исходному состоянию по щелчку, так как "открытое" состояние установлено как важное с восклицательным знаком. Теперь, если вы редактируете свой код, установите два состояния переменных как открытое и закрытое. и затем оставьте toggleClass, чтобы переключаться между состояниями, в которых вы получаете желаемый результат. Я не уверен, что мое объяснение верно, но вот код, который вам нужен. Я уже проверил это, и я использую это на веб-странице Я управляю, если вы хотите, вы можете проверить это

// Categories menu opening
$('.woocommerce.widget_product_categories .product-categories li.cat-parent').prepend('<div class="cat-menu-close"></div>');

$(document).on("click", ".woocommerce.widget_product_categories .product-categories li.cat-parent > .cat-menu-close", function(e) {
var $catParent = $(this).closest('li.cat-parent');
var state = 'close'
var state = 'opened'


$catParent.toggleClass(state);


$(this).nextAll('ul.children:first').slideToggle(state);