当图像折叠回去时（jquery，css），图像没有改变

Posted 2023-02-02

图像在扩展时将发生变化，但是在收缩时将不会发生变化，我的代码如下所示：

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;

有人可以帮忙吗？当图像展开和折叠时，我需要更改图像，谢谢，非常感谢。

答案

问题是即使在SlideUp之后，类别仍保持这样

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

而不是返回到它的原始状态，即>

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

我试图自己找出原因，但是我对js的经验太少，所以很难弄清楚。

现在是否从[]中删除[C0

"!"

图像通常不会停止移动，因为它不会改变状态。

已编辑答案的下方

好，我解决了这个谜语

经过一番反复试验后，我得到你的答复。在您的代码中，您有：

$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');
这不会给您onclick时更改回原始状态的选项，因为带有感叹号的“打开”状态设置为同样重要。现在，如果您编辑代码以将两个变量状态设置为打开和关闭。然后让toggleClass在获得所需结果的状态之间切换。我不确定我的解释是否正确，但这是您需要的代码。我已经对其进行了测试，并且正在我正在管理的        $catParent.toggleClass('opened', !state);
上使用它，如果您希望可以检出它，则可以使用]
webpage
[编辑]
对于检查此答案的任何人，我最好推荐使用另一个名为“ WooCommerce产品类别选择”的插件，因为它似乎可以更好地发挥作用。我现在在我的网站上使用它，唯一的缺点是它没有展开和折叠的图标，但是添加起来确实很容易，如果您决定采用这种方式，则可能会喜欢找到// 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);