图像折叠时不会改变（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 在你得到你想要的结果的状态之间改变。我不确定我的解释是否正确，但这是您需要的代码。 我已经对其进行了测试，我正在webpage 上使用它，如果您愿意，可以查看它

// 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);    

[编辑]

对于查看此答案的任何人，我最好推荐另一个名为“WooCommerce 产品类别选择”的插件，因为它似乎运行得更好。

我现在在我的网站上使用它，唯一的缺点是它没有用于展开和折叠的图标，但添加它真的很容易，如果你决定这样做，你可能会喜欢找到 @987654322 @