Как включить / выключить?(Javascript)

Question

Я пробую JS без jQuery.Но пока все гораздо сложнее.

Я пытаюсь сделать функцию включения / выключения.

Это функция:

function toggleDropdown(){

   var dropdown = document.getElementById('games-dropdown')

   if (dropdown.display = "none"){
    dropdown.style.display = 'block';
   } else {
    dropdown.display = "none";
   }
}

Я вызываю функциюздесь:

<li class="dropdown"><a onclick="toggleDropdown()">GAMES</a></li>

Answer 1

Вы можете использовать функцию classList.toggle.Когда класс виден, вы можете показать тег, если нет, то можете скрыть его.

var dropdown = document.getElementById('games-dropdown').classList.toggle('someClass')

Answer 2

Вы присваиваете значение, а не сравниваете значение с элементом стиля

 <div id='games-dropdown'> Your Dropdown </div>

    <li class="dropdown"><a onClick="toggleDropdown()">GAMES</a></li>

    <script>
    function toggleDropdown(){

       var dropdown = document.getElementById('games-dropdown')

       if (dropdown.style.display == "none"){
        dropdown.style.display = 'block';
       } else {
        dropdown.style.display = "none";
       }
    }
    </script>

Answer 3

Вы не согласны с использованием объекта style, вы проверяете и иногда устанавливаете display непосредственно на dropdown.

Вы также используете = вместо == для сравнения.= для назначения , а не для сравнения.

Таким образом, минимальное изменение:

function toggleDropdown(){

   var dropdown = document.getElementById('games-dropdown')

   // ----------vvvvv    
   if (dropdown.style.display == "none"){
   // ------------------------^^
     dropdown.style.display = 'block';
   } else {
     dropdown.style.display = "none";
   // --------^^^^^^
   }
}

Однако , я бы не стал использоватьstyle вообще.Я бы использовал класс, который скрывает элемент, который вы добавляете и удаляете:

.hidden {
    display: none;
}

и

function toggleDropdown(){
   document.getElementById('games-dropdown').classList.toggle("hidden");
}

Пример:

function toggleDropdown(){
   document.getElementById('games-dropdown').classList.toggle("hidden");
}

.hidden {
      display: none;
  }

<li class="dropdown"><a onclick="toggleDropdown()">GAMES</a></li>
<div id="games-dropdown">
games-dropdown
</div>

Вы также можете сделать свою функцию более универсальной, приняв селектор для элемента, чтобы показать / скрыть:

function toggleDropdown(selector) {
   document.querySelector(selector).classList.toggle("hidden");
}

.hidden {
      display: none;
  }

<ul>
  <li class="dropdown"><a onclick="toggleDropdown('#games-dropdown')">GAMES</a></li>
  <li class="dropdown"><a onclick="toggleDropdown('#games-dropdown2')">GAMES2</a></li>
</ul>
<div id="games-dropdown">
games-dropdown
</div>
<div id="games-dropdown2">
games-dropdown 2
</div>

Я использовал querySelector вместо getElementById, чтобы вы могли использовать другие формы идентификации элемента, но, конечно, используйте getElementById, еслиВы предпочитаете.