Javascript 将活动类添加到多级手风琴

我有一个多级手风琴，但只缺少活动类，只用于活动/打开面板，没有更改任何其他内容，有帮助吗

JS:

$('.toggle').click(function(e) {
e.preventDefault();

var $this = $(this);

if ($this.next().hasClass('show')) {
    $this.next().removeClass('show');
    $this.next().slideUp(350);
} else {
    $this.parent().parent().find('li .inner').removeClass('show');
    $this.parent().parent().find('li .inner').slideUp(350);
    $this.next().toggleClass('show');
    $this.next().slideToggle(350);}
});

---

这是代码笔：

我对你的js做了一些更改

如果您正在关闭当前打开的手风琴，则上面的行将删除该类

$this.parent().parent().find('.is-active').removeClass('is-active');
$this.addClass('is-active');

第一行查看所有的同级元素，并试图找到一个已激活的元素，并删除了类

为活动的

然后，第二行将
处于活动状态
类添加到您正在切换的当前项中

$('.toggle').click(function(e) {
    e.preventDefault();

    var $this = $(this);

    if ($this.next().hasClass('show')) {
        $this.removeClass('is-active');
        $this.next().removeClass('show');
        $this.next().slideUp(350);
    } else {
        $this.parent().parent().find('.is-active').removeClass('is-active');
        $this.addClass('is-active');
        $this.parent().parent().find('li .inner').removeClass('show');
        $this.parent().parent().find('li .inner').slideUp(350);
        $this.next().toggleClass('show');
        $this.next().slideToggle(350);
    }
});

然后在CSS中，如果toggle元素的类
处于活动状态

.toggle.is-active {
    background-color: #ff00ff;
}

我注意到，在codepen演示中，您正在嵌套的accordion上使用内联样式，您可能希望将其从内联中删除，并使用链接样式表，因为它可能会导致样式问题。
请检查此代码



保险商实验室
{列表样式：无；
填充：0；}
内华达州
{左侧填充：1em；
溢出：隐藏；
显示：无；}
内秀{
/*显示：块；*/}
ulli
{边距：0.5em 0；}
美国保险商协会
{宽度：100%；
显示：块；
背景：灰色；
颜色：#fefefe；
填充：0.75em；
边界半径：0.15em；
过渡：背景0.3s；
文本装饰：无；}
美国保险商学院李娜：之后
{内容：'\002B'；
float:right；}
切换：悬停{
背景：黄色；}
.模态对话框{
最大宽度：70%！重要；
边距：自动；}
.模态内容
{高度：500px；}
.模态体
{背景色：rgb（3119184）；
高度：250px；
溢出-y:滚动；}


测试


测试2


$（文档）.ready（函数（）{
$（“.inner”）.hide（）；
$（“.inner:first”）.show（）；
$（“.toggle”）。单击（函数（）{
如果（$（this）.is（“.show”））
{
$（this.removeClass（“show”）；
$（this.next（“.inner”）.slideUp（400）；
}
其他的
{
$（“.inner”）.slideUp（400）；
$（“.toggle”）.removeClass（“show”）；
$（此）.addClass（“当前”）；
$（this.next（“.inner”）.slideDown（400）；
}
});
});
dude，非常感谢，您的解决方案非常完美，节省了时间，但对于sub accordion，我仍然面临同样的问题。我想这是因为您的html在内部accordion上具有内嵌样式。从检查元素来看，这一切似乎都很好。看起来你已经接受了一个有效的答案，所以一切都很好，你的答案也很好是的，答案很好，我有内联样式，因为子手风琴多层次必须有不同的颜色，我现在正在工作，但仍然有一些问题…在你的CSS中，如果你添加一些样式到“.accordion li.toggle”你将能够样式子手风琴。看-
.toggle.is-active {
    background-color: #ff00ff;
}