Javascript 带有箭头动画的Jquery切换div

我有一个有很多div的过滤菜单。所有课程都相同：

<div class="filter-groep">
    <h3 class="filter-title">Filter Title
        <div class="tooltip-info">
            <div class="tooltip-info-container">
                Some tooltip information
            </div>
        </div>
    </h3>
    <div class="filter-content">
        Filter content
    </div>
</div>

过滤标题
一些工具提示信息
过滤内容

我尝试了很多不同的方法，但大多数都不是我想要的

我试过这篇文章的中间部分：

但这是一个手风琴，所以当另一个打开时，其中一个关闭。我想分别打开和关闭它们，我想让箭头在打开和关闭时都有动画效果

此外，箭头是用一些奇怪的边框CSS完成的，我知道你可以用CSS和图标来完成

---

以前有人这样做过吗？

下面我用您的html复制了一个示例：

片段：

$（'.filter groep'）。每个（函数（）{
变量$accordian=$（本）；
$accordian.find（'.filter title'）。在（'click'，function（）上{
如果（！$（this）.next（）是（':visible'））{
$（this）.removeClass（'close'）.addClass（'open'）；
$（this）.find（“i”）.removeClass（“fa角度向下”）.addClass（“fa角度向上”）；
$（this.next（）.slideDown（）；
}否则{
$（this）.removeClass（'open'）.addClass（'close'）；
$（this）.find（“i”）.removeClass（“fa角度向上”）.addClass（“fa角度向下”）；
$（this.next（）.slideUp（）；
}
});
});
手风琴*/
.过滤槽{
宽度：100%；
背景色：#EDEDED；
}
.过滤器组.过滤器标题{
颜色：#fff；
背景色：#3A84DE；
边框底部：1px实心#fff；
位置：相对位置；
填充：13px；
字号：0.87em；
光标：指针；
溢出：隐藏；
}
.过滤器标题.图标{
浮动：对；
右：10px；
}
法兰西{
字体大小：30px！重要；
}

过滤标题
一些工具提示信息
筛选器内容筛选器内容筛选器内容筛选器内容筛选器内容筛选器内容筛选器内容筛选器内容筛选器内容筛选器内容筛选器内容筛选器内容筛选器内容筛选器内容筛选器内容筛选器内容筛选器内容筛选器内容筛选器内容筛选器内容筛选器内容筛选器内容筛选器内容筛选器内容筛选器内容筛选器内容筛选器内容筛选器内容筛选器内容筛选器内容筛选器内容筛选器内容筛选器内容筛选器内容筛选器内容筛选器内容筛选器内容筛选器内容筛选器内容筛选器内容筛选器内容筛选器内容筛选器内容筛选器内容筛选器内容筛选器内容筛选器内容筛选器内容筛选器内容筛选器内容筛选器内容筛选器内容筛选器内容筛选器内容筛选器内容筛选器内容筛选器内容筛选器内容筛选器内容筛选器内容筛选器内容筛选器内容筛选器内容筛选器内容筛选器内容筛选器内容筛选器内容筛选器内容筛选器内容筛选器内容筛选器内容筛选器内容筛选器内容筛选器内容筛选器内容筛选器内容筛选器内容筛选器内容过滤内容过滤内容过滤内容过滤内容过滤内容过滤内容
过滤器2标题
一些工具提示信息
过滤内容过滤内容过滤内容过滤内容过滤内容过滤内容过滤内容过滤内容过滤内容过滤内容过滤内容

下面我用您的html复制了一个示例：

片段：

$（'.filter groep'）。每个（函数（）{
变量$accordian=$（本）；
$accordian.find（'.filter title'）。在（'click'，function（）上{
如果（！$（this）.next（）是（':visible'））{
$（this）.removeClass（'close'）.addClass（'open'）；
$（this）.find（“i”）.removeClass（“fa角度向下”）.addClass（“fa角度向上”）；
$（this.next（）.slideDown（）；
}否则{
$（this）.removeClass（'open'）.addClass（'close'）；
$（this）.find（“i”）.removeClass（“fa角度向上”）.addClass（“fa角度向下”）；
$（this.next（）.slideUp（）；
}
});
});
手风琴*/
.过滤槽{
宽度：100%；
背景色：#EDEDED；
}
.过滤器组.过滤器标题{
颜色：#fff；
背景色：#3A84DE；
边框底部：1px实心#fff；
位置：相对位置；
填充：13px；
字号：0.87em；
光标：指针；
溢出：隐藏；
}
.过滤器标题.图标{
浮动：对；
右：10px；
}
法兰西{
字体大小：30px！重要；
}

过滤标题
一些工具提示信息
筛选器内容筛选器内容筛选器内容筛选器内容筛选器内容筛选器内容筛选器内容筛选器内容筛选器内容筛选器内容筛选器内容筛选器内容筛选器内容筛选器内容筛选器内容筛选器内容筛选器内容筛选器内容筛选器内容筛选器内容筛选器内容筛选器内容筛选器内容筛选器内容筛选器内容筛选器内容筛选器内容筛选器内容筛选器内容筛选器内容筛选器内容筛选器内容筛选器内容筛选器内容筛选器内容筛选器内容筛选器内容筛选器内容筛选器内容筛选器内容筛选器内容筛选器内容筛选器内容筛选器内容筛选器内容筛选器内容筛选器内容筛选器内容筛选器内容筛选器内容筛选器内容筛选器内容筛选器内容筛选器内容筛选器内容筛选器内容筛选器内容筛选器内容筛选器内容筛选器内容筛选器内容筛选器内容筛选器内容筛选器内容筛选器内容筛选器内容筛选器内容筛选器内容筛选器内容筛选器内容筛选器内容筛选器内容筛选器内容筛选器内容筛选器内容筛选器内容筛选器内容筛选器内容过滤内容过滤内容过滤内容过滤内容过滤内容过滤内容
过滤器2标题
一些工具提示信息
过滤内容过滤内容过滤内容过滤内容过滤内容过滤内容过滤内容过滤内容过滤内容过滤内容过滤内容

制作手风琴很容易。您可以查看jqueryUI accordion的源代码，以便更好地理解

箭头也是用一些奇怪的边框CSS完成的

-不，这一点也不奇怪。这是一种常见的做法。如果您只需要为一些可以用CSS复制的箭头加载整个库（fontAwesome），为什么还要加载它呢

若要设置它们的动画，只需使用一个箭头（而不是示例中的两个箭头）并将其与过渡一起旋转（如果这是您正在寻找的动画）

对于第二件事，能够在同一时间打开它是非常直接的。看看下面我为你写的代码

let title=$（'.filter title'）
title.on（'click'，function（）{
let content=$（“.filter content”）
让state=$（this.attr（'class'））
状态==‘打开’？$（此）。位于