Javascript按钮悬停只能工作一次

我试图实现一些按钮，在悬停状态下显示列表项

它工作良好，但它停止工作后，第一次悬停，然后我需要不断刷新页面，它再次工作

请参阅下面的代码

var btn = document.getElementsByClassName("collapsible"); 
            
                    btn[0].addEventListener("click", function () { 
                        this.classList.toggle("active"); 
                        var content = this.nextElementSibling; 
                        if (content.style.display === "block") { 
                            content.style.display = "none"; 
                        } else { 
                            content.style.display = "block"; 
                        } 
                    }); 

---

还有什么方法可以让它一次又一次地工作，而不必刷新页面吗？

既然您说了

悬停

，但使用

单击

显示代码，我有两个解决方案供您使用：

这对于CSS来说非常简单<代码>+是最常用的

点击

const btn=document.getElementsByClassName（“可折叠”）；
btn[0]。addEventListener（“单击”，函数（）{
this.classList.toggle（“活动”）；
});
。可折叠+*{
显示：无；
}
.可折叠的.活动的+*{
显示：块；
}
点击我！

你好！
既然您说了
悬停
，但使用
单击显示代码
我有两个解决方案：

这对于CSS来说非常简单<代码>+

是最常用的

点击

const btn=document.getElementsByClassName（“可折叠”）；
btn[0]。addEventListener（“单击”，函数（）{
this.classList.toggle（“活动”）；
});
。可折叠+*{
显示：无；
}
.可折叠的.活动的+*{
显示：块；
}
点击我！

你好！
对于悬停，您需要
鼠标悬停
和
鼠标悬停
事件


var btn=document.getElementsByClassName（“可折叠”）；
btn[0]。添加了文本侦听器（“鼠标悬停”，btnHover）；
btn[0]。添加了文本侦听器（“鼠标出”，btnHover）；
函数btnHover（）{
this.classList.toggle（“活动”）；
var content=this.nextElementSibling；
如果（content.style.display==“块”）{
content.style.display=“无”；
}否则{
content.style.display=“block”；
}
}
悬停
您好
对于悬停，您需要
鼠标悬停
和
鼠标悬停
事件


var btn=document.getElementsByClassName（“可折叠”）；
btn[0]。添加了文本侦听器（“鼠标悬停”，btnHover）；
btn[0]。添加了文本侦听器（“鼠标出”，btnHover）；
函数btnHover（）{
this.classList.toggle（“活动”）；
var content=this.nextElementSibling；
如果（content.style.display==“块”）{
content.style.display=“无”；
}否则{
content.style.display=“block”；
}
}
悬停
hello
这会稍微更改您的代码…使用Javascript，您可以为元素节点列表设置一个
mouseover
和
mouseout
事件侦听器，目标是列表父元素
ul
的显示样式

请注意
querySelectorAll（）
的用法。这将创建方法中标识的类的节点列表。使用
forEach
方法，它将调用
forEach
函数=>
按钮中设置的当前值参数。然后可以使用
事件的parentNode.target
，然后将
UL
作为父元素的子元素。然后，如果UL元素是父元素的第二个子元素，那么这将适用于您想要在文档中包含的任何数量的按钮和列表项，否则您将需要调整该部分


const btn=document.queryselectoral（“.btn”）；
btn.forEach（（按钮）=>{
addEventListener（'mouseover'，e=>{
e、 target.parentNode.children[1].style.display=“block”；
})
addEventListener（'mouseout'，e=>{
e、 target.parentNode.children[1].style.display=“无”；
})
})
按钮{
显示：块；
}
.名单{
显示：无；
背景：无；
}

显示列表

清单项目1
清单项目2
清单项目3
清单项目4

显示第二个列表

清单项目5
清单项目6
清单项目7
清单项目8

显示第三个列表

清单项目9
清单项目10
清单项目11
清单项目12

这会稍微更改您的代码…使用Javascript，您可以为元素节点列表设置一个
mouseover
和
mouseout
事件侦听器，以列表父元素
ul
元素的显示样式为目标

请注意
querySelectorAll（）
的用法。这将创建方法中标识的类的节点列表。使用
forEach
方法，它将调用
forEach
函数=>
按钮中设置的当前值参数。然后可以使用
事件的parentNode.target
，然后将
UL
作为父元素的子元素。然后，如果UL元素是父元素的第二个子元素，那么这将适用于您想要在文档中包含的任何数量的按钮和列表项，否则您将需要调整该部分


const btn=document.queryselectoral（“.btn”）；
btn.forEach（（按钮）=>{
addEventListener（'mouseover'，e=>{
e、 target.parentNode.children[1].style.display=“block”；
})
addEventListener（'mouseout'，e=>{
e、 target.parentNode.children[1].style.display=“无”；
})
})
按钮{
显示：块；
}
.名单{
显示：无；
背景：无；
}

显示列表

清单项目1
清单项目2
清单项目3
清单项目4

显示第二个列表

清单项目5
清单项目6
清单项目7
清单项目8

显示第三个列表

清单项目9
清单项目10
清单项目11
清单项目12