Блог

Главная - Вопросы по программированию - JavaScript — нажмите кнопку ответа после одного дополнительного щелчка

JavaScript — нажмите кнопку ответа после одного дополнительного щелчка

#javascript #html #css

Вопрос:

Я пытаюсь создать раскрывающийся список, используя CSS и JavaScript.

 document.querySelector('.dropdown-btn').addEventListener("click", function() {
  let list = document.getElementById("project-list");
  if (list.style.display === "none") {
    list.style.display = "inline-block";
  } else {
    list.style.display = "none";
  }
}); 
 #project-list {
  list-style-type: none;
  display: none;
  position: relative;
} 
 <ul>
  <li class="projects">Projects
    <button class="dropdown-btn">Show<i class="fas fa-angle-double-down"></i></button>
    <br>
    <ul id="project-list">
      <li><a href="#">Hello</a></li>
      <li><a href="#">World</a></li>
    </ul>
  </li>
</ul>

Вы можете попробовать это здесь. Он реагирует после одного дополнительного щелчка, но я не могу понять причину. Я изучаю переднюю часть. Как я могу это исправить?

Ответ №1:

Проблема в том, что list.style.display при первом нажатии на кнопку появляется пустая строка. Вам также нужно проверить это:

 document.querySelector('.dropdown-btn').addEventListener("click", function() {
  let list = document.getElementById("project-list");

  if (!list.style.display || list.style.display === "none") {
    list.style.display = "inline-block";
  } else {
    list.style.display = "none";
  }
}); 
 #project-list {
  list-style-type: none;
  display: none;
  position: relative;
} 
 <ul>
  <li class="projects">Projects
    <button class="dropdown-btn">Show<i class="fas fa-angle-double-down"></i></button>
    <br>
    <ul id="project-list">
      <li><a href="#">Hello</a></li>
      <li><a href="#">World</a></li>
    </ul>
  </li>
</ul>

Комментарии:

1. На самом деле нет, css none , который вы установили, не может быть получен с помощью JavaScript. Доступ к этому display значению получает/задает в DOM, а не в таблице стилей.

Ответ №2:

Кажется, что он реагирует после второго щелчка, потому list.style.display что при первом щелчке это пустая строка.

Удивлен? Правило CSS применяется к элементу, но не применяется к объекту JavaScript.

Чтобы получить фактический стиль элемента (включая правила CSS и встроенные стили), вы можете использовать getComputedStyle() .

Например:

 document.querySelector('.dropdown-btn').addEventListener("click", function() {
  let list = document.getElementById("project-list");
  let style = getComputedStyle(list)
  if (style.display === "none") {
    list.style.display = "inline-block";
  } else {
    list.style.display = "none";
  }
});
Метки: