Javascript 按钮 Hover 只工作一次

Question

我正在尝试实现一些按钮来显示 hover 上的列表项。

它工作得很好，但是在第一个 hover 之后它停止工作然后我需要不断刷新页面才能再次工作。

请看下面的代码；

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"; 
                        } 
                    }); 

无论如何我可以让它一次又一次地工作而无需刷新页面？

Answer 1

既然你说hover但使用click显示代码，我有两个解决方案：

这对 CSS 来说非常简单。 +是兄弟组合子。

点击

 const btn = document.getElementsByClassName("collapsible"); btn[0].addEventListener("click", function () { this.classList.toggle("active"); });

 .collapsible + * { display: none; }.collapsible.active + * { display: block; }

 <button class="collapsible">Click Me!</button> <p> Hello There! <p>

Hover

 .collapsible + * { display: none; }.collapsible:hover + * { display: block; }

 <button class="collapsible">Hover Me!</button> <p> Hello There! <p>

Answer 2

对于 hover 你需要mouseover和mouseout事件

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

 <button class="collapsible">hover</button> <p style="display:none;">hello</p>

Answer 3

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

注意querySelectorAll()的使用。 这将创建方法中标识的 class 的节点列表。 使用forEach方法，它将调用在forEach function => button中设置的当前值参数。 然后，您可以使用event.target的 parentNode，然后将UL作为父元素的子元素。 然后这将适用于您希望在文档中拥有的任意数量的按钮和列表项，前提是 UL 元素是父元素的第二个子元素，否则您需要调整该部分。

 const btn = document.querySelectorAll(".btn"); btn.forEach((button) => { button.addEventListener('mouseover', e => { e.target.parentNode.children[1].style.display = "block"; }) button.addEventListener('mouseout', e => { e.target.parentNode.children[1].style.display = "none"; }) })

 button { display: block; }.list { display: none; background: none; }

 <div> <button class="btn">Show the List</button> <ul class="list"> <li>list item 1</li> <li>list item 2</li> <li>list item 3</li> <li>list item 4</li> </ul> </div> <div> <button class="btn">Show the Second List</button> <ul class="list"> <li>list item 5</li> <li>list item 6</li> <li>list item 7</li> <li>list item 8</li> </ul> </div> <div> <button class="btn">Show the Third List</button> <ul class="list"> <li>list item 9</li> <li>list item 10</li> <li>list item 11</li> <li>list item 12</li> </ul> </div>