jquery - slideDown/slideUp 和旋转图像

Question

我最近接手了一个有很多自定义js的元素。我正在做的事情之一是向下扩展的堆叠菜单——它本质上是一个 Accordion ——但它的写法有点不同。我拥有的是一个人字形图标，它在元素打开时旋转 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

在您的 if/else 逻辑可能导致您的问题之前切换 .down。由于您已经具有处理打开哪个 Accordion 的逻辑，因此您也可以在其中添加人字形的添加和删除逻辑。

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");
}