Блог

Я пытаюсь реализовать какую-то кнопку, которая отображает элементы списка при наведении курсора мыши.

Он работает хорошо, однако он перестает работать после первого наведения курсора мыши, после чего мне нужно продолжать обновлять страницу, чтобы она снова заработала.

Пожалуйста, ознакомьтесь с кодом ниже;

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

Могу ли я в любом случае заставить его работать снова и снова, не обновляя страницу?

Поскольку вы говорите 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> 

Наведение

 .collapsible   * {
  display: none;
}

.collapsible:hover   * {
  display: block;
} 

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

Это немного меняет ваш код … Используя Javascript, вы можете установить прослушиватель mouseover mouseout событий и для вашего списка узлов элементов, ориентируясь на стиль отображения родительского ul элемента lists .

Обратите внимание на использование querySelectorAll() . Это создаст список узлов класса, определенного в методе. Используя forEach метод, он будет вызывать параметр текущего значения, установленный в forEach функции => button . Затем вы можете использовать event.target родительский узел, а затем получить 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> 

для наведения вам понадобится 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>