Javascript 切换显示/隐藏DIV错误

我有下面的代码，它采用一些简单的HTML并使用一些JS来显示/隐藏它

//因此forEach可用于'querySelectorAll'和'getElementsByClassName'集合
HTMLCollection.prototype.forEach=NodeList.prototype.forEach=Array.prototype.forEach；
函数隐藏（e，itm_id）{
var tbl=document.getElementById（itm_id）；
如果（tbl.style.display==“”）{
e、 innerHTML=“”；
tbl.style.display=“无”；
}否则{
e、 innerHTML=“”；
tbl.style.display=“”；
}
}
// -----------------------------------------------------------
//新代码
//新切换链接
let toggles=document.getElementsByClassName（'toggler'）；
//附加单击事件
toggles.forEach（link=>link.addEventListener（'click'，fnToggleElement））
//事件处理程序定义
函数fnToggleElement（）{
让elements=document.querySelectorAll（`id^=“${this.dataset.selector}”]`）
让className='d-none'
elements.forEach（el=>{
让fas=el.parentElement.closest（'.item、.sub-container、.menu-container'）。queryselectoral（'.fa'））
if（el.classList.contains（className））{
el.classList.remove（className）
fas.forEach（fa=>{
fa.classList.remove（'fa-plus'）
fa.classList.add（'fa-减号'）
})
}否则{
el.classList.add（类名称）
fas.forEach（fa=>{
fa.classList.remove（'fa-减号'）
fa.classList.add（'fa-plus'）
})
}
})
}

正文{
背景：#fff；
边缘顶部：20px；
}
h1.标题{
字体：“奥斯瓦尔德”；
文本转换：大写；
}
运输署{
背景#f1f1；
边框底部：1px实心#ccc；
右边框：1px实心#ccc；
填充：20px；
保证金：5px；
边框顶部：1px实心#fff；
左边框：1px实心#fff；
}
.包装{
利润率：20px 0 0 20px；
边界半径：85px；
溢出：隐藏；
边框：10px实心#fff；
盒影：0 10px#999；
}
.菜单容器{
边缘底部：50px；
}
.分箱{
填充：20px；
背景：重复线性梯度（-45度，#999，#999 10px，#888 10px，#888 20px）；
边界半径：2px；
}
.标题{
颜色：#000；
背景：#ccc；
边框底部：1px实心#ccc；
填充物：5px；
}
.缩进{
背景：#fff；
填充：20px；
}
.图标{
宽度：64px；
高度：64px；
}
.项目{
背景：#fff；
左侧填充：10px；
背景#f1f1；
边框顶部：1px实心#fff；
字体大小：30px；
}
.画廊{
宽度：100%；
*宽度：99.94877049180327%；
保证金：0；
填充：0；
}
李先生{
保证金：2p5px；
}
李先生{
保证金：2p5px；
显示：块；
}
.gallery.grid李：悬停{
背景：#ccc；
}
李先生{
显示：内联块；
边框顶部：1px实心#eee；
右边框：1px实心#ccc；
边框底部：1px实心#ccc；
左边框：1px实心#eee；
填充：6px；
位置：相对位置；
-moz框大小：边框框；
边界半径：3px 3px 3px 3px；
背景：#fff；
}
a画廊{
显示：块；
}

切换

活动


不起作用的主要原因是您更改了显示值，例如

 tbl.style.display = "none";`

由于内联样式通常具有更高的特殊性，它们会覆盖外部CSS规则（如此处使用的
d-none
），除非一开始使用
！重要信息
在这些类中，当然，不建议将其作为此类问题的常规解决方案

相反，通过这样做，用按钮切换类

      if (tbl.className.indexOf("d-none") > -1 ) {
        e.innerHTML = "<i class='fa fa-plus' aria-hidden='true'></i>";
        tbl.classList.remove("d-none");
      } else {
        e.innerHTML = "<i class='fa fa-minus' aria-hidden='true'></i>";
        tbl.classList.add("d-none");
      }


切换

活动

因为您已经在web页面中添加了JQuery，所以我为您的问题编写了一个JQuery解决方案。这看起来比用JS写所有东西都要干净。如果您想坚持使用JS，可以将相同的逻辑重写为JS。
问题是你没有处理所有的案件


$（文档）.ready（函数（）{
//它们都已打开，因此相应地设置切换
$（'.toggler'）.addClass（'toggle-open'）；
//点击
$（'.heading>a'）。在（'click'，函数（事件）{
//预防措施
event.preventDefault（）；
//更改hedding图标
//如果-那么制造+其他制造-
if（$（this）.find（'i'）.hasClass（'fa-minus'））{
//将-更改为+
$（this）.find（'i'）.removeClass（'fa-minus'）.addClass（'fa-plus'）；
//隐藏子容器
$（this.parent（）.parent（）.find（'.sub-container'）.css（“显示”、“无”）；
//表明状态
$（this.parent（）.parent（）.find（'.sub-container'）.addClass（'closed'）；
//如果此操作使所有关闭的子容器都处于打开状态，但toggle认为任何子容器都处于打开状态，则指示所有关闭状态
if（$（'.sub-container.closed'）.length==$（'.menu-container'）.length）{
$（'.toggler'）.removeClass（'toggle-open'）；
}
}
else if（$（this）.find（'i'）.hasClass（'fa-plus'））{
//换成-
$（this）.find（'i'）.removeClass（'fa-plus'）.addClass（'fa-plus'）；
//显示子容器
$（this.parent（）.parent（）.find（'.sub-container'）.css（“显示”、“块”）；
//表明状态
$（this.parent（）.parent（）.find（'.sub-container'）.removeClass（'closed'）；
//如果此操作使任何子容器打开，但toggle认为所有子容器都已关闭，请指示打开状态
$（'.toggler'）.addClass（'toggle-open'）；
}
});
//切换动作
$（'.toggler'）。在（'click'，function（）上{
//我们使用toggleopen类检查任何子容器是否打开或所有子容器是否关闭
//若存在toggle open类，则表示所有子容器或任何子容器都处于打开状态
//更改是否所有子容器打开或任何子容器打开
if（$（this）.hasClass（'toggle-open'））{
//关闭所有子容器
$（'.heading'）。每个（函数（）{
//在这里，每个项目都被获取，然后将其关闭，$（此）引用上下文
$（this）.find（'i'）.removeClass（'fa-minus'）.addCla