Javascript 使隐藏元素的列表可见

我有两个列表，一开始它们应该隐藏起来。当我点击一个主题旁边的+按钮时，列表应该会顺利打开；如果我点击这个按钮，此时看起来应该是这样的-再次，列表应该被关闭

如果我在第一个列表打开时点击第二个列表的按钮，第一个列表应该被顺利隐藏，第二个列表应该被显示；反之亦然

我有一个相当大的问题：出于某种原因，当列表关闭时，+按钮仅在第二个列表旁边可见，并且仅当我打开第二个列表时，它才会出现在第一个列表旁边

我做错了什么？老实说，我甚至不知道这是我的JS代码的问题还是css/html的问题

var buttonSections=document.querySelector.open-sections； var buttonContacts=document.querySelector.open-contacts； var sectionsList=document.querySelector.sections\u列表； var contactsList=document.querySelector.contacts\u列表； 可变宽度=767； buttonSections.addEventListenerclick，函数{ 如果节list.classList.containshidden{ sectionsList.classList.removehidden； sectionsList.classList.addopen； buttonSections.style.value=-； buttonSections.style.width=16px； buttonSections.style.height=1px； }否则，如果节list.classList.containsopen{ 节list.classList.removeopen； sectionsList.classList.addhidden； buttonSections.style.value=+； buttonSections.style.width=16px； buttonSections.style.height=16px； } 如果contactsList.classList.ContainesOpen{ buttonSections.style.value=-； contactsList.classList.addhidden； } }; 按钮Contacts.AddEventListener单击，函数{ 如果contactsList.classList.containshidden{ contactsList.classList.removehidden； contactsList.classList.addopen； buttonSections.style.value=-； buttonContacts.style.width=16px； 按钮Contacts.style.height=1px； }否则，如果contactsList.classList.ContainesOpen{ contactsList.classList.removeopen； contactsList.classList.addhidden； buttonSections.style.value=+； buttonContacts.style.width=16px； 按钮Contacts.style.height=16px； } 如果节list.classList.containsopen{ buttonSections.style.value=-； sectionsList.classList.addhidden； } }; .页脚\额外{ 显示器：flex； 弯曲方向：立柱； 柔性包装：包装； 填充顶部：77px； 证明内容：之间的空间； 保证金：0自动； 右边距：11px； } .页脚部分{ 位置：相对位置； 显示器：flex； 弯曲方向：立柱； 宽度：225px； 右边距：0px； 左边距：13px； } .page-footer\u节：：之前{ 内容：； 位置：绝对位置； 顶部：44px； 左：-300px； 高度：1px； 宽度：1067px； 背景色：626962； 不透明度：0.2； } .开放部分{ 位置：绝对位置； 顶部：3px； 右：-63px； 宽度：16px； 高度：16px； 光标：指针； 边界：0； 背景：透明； 背景图像：url../img/icons/button-open-sections.svg； 背景重复：无重复； } .章节列表{ 边缘顶部：15px； 显示器：flex； 弯曲方向：行； 柔性包装：包装； 证明内容：之间的空间； } .隐藏{ 显示：无； } .页脚\章节\标题{ 边缘底部：24px； 字体系列：Roboto浓缩版； 字体大小：15px； 线高：16px； 显示器：flex； 对齐项目：居中； 文本转换：大写； 颜色：1B2D37； } .sections\u list-item-link{ 字体大小：15px； 线高：25px； 颜色：1B2D37； 不透明度：0.5； } .章节列表项：N-child2n-1{ 最小宽度：165px； } .项目交付， .项目联系人{ 最小宽度：114px； } .页脚联系人{ 位置：相对位置； 边缘顶端：33像素； 左边距：15px； 显示器：flex； 弯曲方向：立柱； 柔性包装：包装； 右边距：32px； 边缘底部：26px； } .开放式联系人{ 位置：绝对位置； 顶部：9px； 右图：-15px； 宽度：16px； 高度：16px； 边界：无； 背景：透明； 光标：指针； 背景图像：url../img/icons/button-open-contacts.svg； 背景重复：无重复； } .页脚\联系人-标题{ 边缘底部：32px； 字体大小：15px； 线高：16px； 字体系列：Roboto浓缩版； 文本转换：大写； 字体风格：普通； 字体大小：正常； 颜色：1B2D37； } .联系人列表{ 宽度：270px； 显示器：flex； 弯曲方向：立柱； 柔性包装：包装； } .联系人列表链接{ 字体大小：15px； 线高：25px； 颜色：1B2D37； 不透明度：0.5； } Разделы сайта Наш офис

---

你不是真的在耍我们 可复制的例子。您的标记不起作用，因为您没有为我们提供自定义元素的代码，所以我不得不将其更改为

无论如何，使代码出错的是，您从未从else-if语句中删除open

---

我建议您只使用一个类：列表要么是打开的，要么是隐藏的。你不需要两者兼得。这只会造成混乱，这就是这里发生的事情。我建议您选择hidden作为唯一的类。

我认为您正在尝试创建手风琴，您需要在一开始就隐藏所有ul

然后，您可以告诉JavaCScript只显示刚刚被点击的按钮的ul同级

这里是一个例子，请注意，有很多方法可以做到这一点，我正在使用，但通过下面的代码，您可以按照相同的HTML结构添加尽可能多的页脚

var按钮=[…document.querySelectorAll[class^='open-']； button.forEachfunctionelement{ element.addEventListenerclick，函数{ var parent=this.parentElement.className； document.querySelector.page-footer\uuuu extra>[class^='page-footer\uuuu']：not.+parent+>ul.classList.addhidden； this.parentNode.querySelectorul.classList.removehidden }，假； } .页脚\额外{ 显示器：flex； 弯曲方向：立柱； 柔性包装：包装； 填充顶部：77px； 证明内容：之间的空间； 保证金：0自动； 右边距：11px； } .页脚部分{ 位置：相对位置； 显示器：flex； 弯曲方向：立柱； 宽度：225px； 右边距：0px； 左边距：13px； } .page-footer\u节：：之前{ 内容：； 位置：绝对位置； 顶部：44px； 左：-300px； 高度：1px； 宽度：1067px； 背景色：626962； 不透明度：0.2； } .开放部分{ 位置：绝对位置； 顶部：3px； 右：-63px； 宽度：16px； 高度：16px； 光标：指针； 边界：0； 背景：透明； 背景图像：url../img/icons/button-open-sections.svg； 背景重复：无重复； } .章节列表{ 边缘顶部：15px； 显示器：flex； 弯曲方向：行； 柔性包装：包装； 证明内容：之间的空间； } .页脚\章节\标题{ 边缘底部：24px； 字体系列：Roboto浓缩版； 字体大小：15px； 线高：16px； 显示器：flex； 对齐项目：居中； 文本转换：大写； 颜色：1B2D37； } .sections\u list-item-link{ 字体大小：15px； 线高：25px； 颜色：1B2D37； 不透明度：0.5； } .章节列表项：N-child2n-1{ 最小宽度：165px； } .项目交付， .项目联系人{ 最小宽度：114px； } .页脚联系人{ 位置：相对位置； 边缘顶端：33像素； 左边距：15px； 显示器：flex； 弯曲方向：立柱； 柔性包装：包装； 右边距：32px； 边缘底部：26px； } .开放式联系人{ 位置：绝对位置； 顶部：9px； 右图：-15px； 宽度：16px； 高度：16px； 边界：无； 背景：透明； 光标：指针； 背景图像：url../img/icons/button-open-contacts.svg； 背景重复：无重复； } .页脚\联系人-标题{ 边缘底部：32px； 字体大小：15px； 线高：16px； 字体系列：Roboto浓缩版； 文本转换：大写； 字体风格：普通； 字体大小：正常； 颜色：1B2D37； } .联系人列表{ 宽度：270px； 显示器：flex； 弯曲方向：立柱； 柔性包装：包装； } .联系人列表链接{ 字体大小：15px； 线高：25px； 颜色：1B2D37； 不透明度：0.5； } .隐藏{ 显示：无 } 您正在尝试创建手风琴 Разделы сайта 开放部分 Наш офис 开放式联系人

---

代码片段没有做任何事情，没有-或+可以点击，也可以做类似的事情。