Javascript 单击搜索框时删除类

TLDR在这个代码示例中，我试图创建的功能是单击一个框（可折叠的有

活动的

类），然后单击搜索框，活动类将被删除，关闭可折叠的。当前，remove类不工作。知道为什么吗

更详细地说：

我有一个可折叠块的列表，当单击它们时，它们将获得一个

活动的

类。您可以搜索搜索框以筛选出要显示的块，然后单击它以显示更多内容。我意识到，当您返回搜索时，如果没有“松开”一个框（关闭可折叠的），该框仍然处于活动状态（这很有意义）

我有一个想法，在搜索框聚焦时，我将循环遍历所有可折叠类并移除活动类本身（反过来，关闭可折叠类）

我已经到了可以找到哪个可折叠文件处于活动状态的地步，但是我无法删除

active

类

这是因为最初单击该框以添加类，并且必须再次物理单击才能删除它吗

var coll=document.getElementsByClassName（“可折叠”）；
var i；
对于（i=0；i

。可折叠{
显示器：flex；
证明内容：之间的空间；
背景色：白色；
颜色：黑色；
光标：指针；
填充：18px；
宽度：100%；
边界：无；
文本对齐：左对齐；
大纲：无；
字体大小：20px；
}
.可折叠跨度{
左侧填充：5px；
右侧填充：5px；
}
.可折叠。活动，
.可折叠：悬停{
背景色：#333；
颜色：白色；
}
.内容{
填充：0 18px；
最大高度：0；
溢出：隐藏；
过渡段：最大高度0.2s放松；
}
.内容p{
边缘顶部：10px；
}

A对B销售
我们的航运政策是什么？

他们酷毙了。

你在生产更多的产品吗？

我们很快会卖给你更多

我看不出您从哪里得到的

活动类没有被删除。这似乎没有什么问题。我认为问题在于，您正在通过
maxHeight
设置显示答案，但单击搜索框时没有重置答案。我在这段代码中对其进行了更新，但本质上它归结为在循环中添加以下内容：

var content = faqButtons[i].nextElementSibling
content.style.maxHeight = null


var coll=document.getElementsByClassName（“可折叠”）；
var i；
对于（i=0；i

。可折叠{
显示器：flex；
证明内容：之间的空间；
背景色：白色；
颜色：黑色；
光标：指针；
填充：18px；
宽度：100%；
边界：无；
文本对齐：左对齐；
大纲：无；
字体大小：20px；
}
.可折叠跨度{
左侧填充：5px；
右侧填充：5px；
}
.可折叠。活动，
.可折叠：悬停{
背景色：#333；
颜色：白色；
}
.内容{
填充：0 18px；
最大高度：0；
溢出：隐藏；
过渡段：最大高度0.2s放松；
}
.内容p{
边缘顶部：10px；
}

A对B销售
我们的航运政策是什么？

他们酷毙了。

你在生产更多的产品吗？

我们很快会卖给你更多

下面是一种尽可能少使用JavaScript的方法。如果禁用JavaScript，唯一会被破坏的就是搜索框。单击时，分区仍将按预期打开和关闭

手风琴将其状态存储在复选框中，每个部分一个复选框。每个部分的标题都是一个
标签
元素，单击时可切换该部分的复选框。使用CSS
：checked
选择器展开和收拢部分


var sections=[].slice.call（document.queryselectoral（“.accordion li”），
searchAccordion=函数（）{
var value=document.getElementById（“搜索”）.value.toLowerCase（）；
章节。地图（功能（章节）{
var content=section.textContent.toLowerCase（）；
section.querySelector（“输入”）.checked=content.includes（值）；
});
};
正文{
字体系列：无衬线；
}
.手风琴{
左侧填充：0；
保证金：-1rem；
}
李国章{
列表样式类型：无；
}
.手风琴输入{
显示：无；
}
.手风琴标签{
背景色：#eee；
过渡：背景色100ms；
光标：指针；
字号：1.2rem；
填充：1rem；
显示：块；
}
手风琴