为什么setAttribute'；假'；在Javascript中使用另一个按钮但不使用self？

我有一个使用按钮和香草Javascript的菜单。 单击按钮时，它会将类

opened

添加到按钮中，并将

aria expanded=“false”

更改为

aria expanded=“true”

如果单击另一个按钮，原始按钮的属性将恢复为

aria expanded=“false”

，并且类

opened

将被删除

但是，如果您连续第二次单击原始按钮，同时类

打开

被删除，

aria expanded=“true”

不会变回

aria expanded=“false”

，我真的很难理解为什么

这是脚本和一个最小CSS的小菜单（显然，浏览器的检查器需要查看更改）。 注意：下面的原始JS是为多级菜单编写的，显然在本例中没有使用

for（常量选择器[“.btn-level-1”、“.btn-level-2”、“.btn-level-3”、“.btn-level-4”、“.btn-level-5”、“.btn-level-6”、]））{
const buttons=[…document.querySelectorAll（选择器）]；
用于（按钮中的常量按钮）{
按钮。addEventListener（'单击'，（）=>{
buttons.filter（b=>b！==button）.forEach（b=>{
b、 classList.remove（'opened'）；//这对self有效，如果单击了其他按钮也有效
b、 setAttribute（“aria expanded”，“false”）；//这在self上不起作用
});
button.classList.toggle（'opened'）；
setAttribute（“aria展开”、“true”）；
})
}}

按钮+ul{
显示：无；
}
按钮打开+ul{
显示：块；
}
李{
填充：10px；
列表样式：无；
}
.侧导航{
宽度：560px；
背景：#eee；
}
.视觉隐藏{
边界：0；
填充：0；
保证金：0；
位置：绝对位置；
高度：1px；
宽度：0；
溢出：隐藏；
空白：nowrap；
}
.菜单切换{
高度：44px；
宽度：44px；
显示：内联块；
线高：44px；
字体大小：25px；
文本对齐：居中；
文字装饰：无；
保证金：0；
}
.图标{
左：1rem；
}

+
显示“某些类别”的子菜单






+
显示“某些类别”的子菜单

切换

按钮上的
打开的
类后
需要检查在设置
属性时是否实际添加或删除了它。您可以使用
classList.contains
完成此操作。更新的工作示例：


for（常量选择器[“.btn-level-1”、“.btn-level-2”、“.btn-level-3”、“.btn-level-4”、“.btn-level-5”、“.btn-level-6”、]））{
const buttons=[…document.querySelectorAll（选择器）]；
用于（按钮中的常量按钮）{
按钮。addEventListener（'单击'，（）=>{
buttons.filter（b=>b！==button）.forEach（b=>{
b、 classList.remove（'opened'）；
b、 setAttribute（“aria扩展”、“false”）；
});
button.classList.toggle（'opened'）；
//检查下面应该设置的aria扩展值
让ariaExpanded=button.classList.contains（'opened'）.toString（）；
setAttribute（“aria展开”，aria展开）；
})
}}
按钮+ul{
显示：无；
}
按钮打开+ul{
显示：块；
}
李{
填充：10px；
列表样式：无；
}
.侧导航{
宽度：560px；
背景：#eee；
}
.视觉隐藏{
边界：0；
填充：0；
保证金：0；
位置：绝对位置；
高度：1px；
宽度：0；
溢出：隐藏；
空白：nowrap；
}
.菜单切换{
高度：44px；
宽度：44px；
显示：内联块；
线高：44px；
字体大小：25px；
文本对齐：居中；
文字装饰：无；
保证金：0；
}
.图标{
左：1rem；
}



+
显示“某些类别”的子菜单






+
显示“某些类别”的子菜单






切换
按钮上的
打开的
类后
需要检查在设置
属性时是否实际添加或删除了它。您可以使用
classList.contains
完成此操作。更新的工作示例：


for（常量选择器[“.btn-level-1”、“.btn-level-2”、“.btn-level-3”、“.btn-level-4”、“.btn-level-5”、“.btn-level-6”、]））{
const buttons=[…document.querySelectorAll（选择器）]；
用于（按钮中的常量按钮）{
按钮。addEventListener（'单击'，（）=>{
buttons.filter（b=>b！==button）.forEach（b=>{
b、 classList.remove（'opened'）；
b、 setAttribute（“aria扩展”、“false”）；
});
button.classList.toggle（'opened'）；
//检查下面应该设置的aria扩展值
让ariaExpanded=button.classList.contains（'opened'）.toString（）；
setAttribute（“aria展开”，aria展开）；
})
}}
按钮+ul{
显示：无；
}
按钮打开+ul{
显示：块；
}
李{
填充：10px；
列表样式：无；
}
.侧导航{
宽度：560px；
背景：#eee；
}
.视觉隐藏{
边界：0；
填充：0；
保证金：0；
位置：绝对位置；
高度：1px；