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

1

Я пытаюсь 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>
  • 0
    Класс CSS будет намного проще. dropdown.classList.toggle("enabled")
  • 0
    Если какой-либо из ответов ниже ответил на ваш вопрос, как работает переполнение стека, вы бы «приняли» ответ, щелкнув галочку рядом с ним; подробности здесь . Но только если на ваш вопрос дан ответ; если нет, попробуйте добавить больше деталей к вопросу. :-)
Показать ещё 1 комментарий
Теги:
dom
onclick
toggle

3 ответа

1
Лучший ответ

Вы не согласны с использованием объекта 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 если вы предпочитаете.

Поделиться
  • 0
    Большое спасибо, что, кажется, работает! Да, я тоже постараюсь добавить класс. Но это был тест, чтобы увидеть, смогу ли я понять это. В конце концов я хочу добавить класс, который будет запускать CSS-анимацию. Я пытаюсь сделать этот сайт: blizzard.com/en-us
0

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

var dropdown = document.getElementById('games-dropdown').classList.toggle('someClass')
Поделиться
  • 0
    Вы имеете в виду, как я сделал в своем ответе ? :-)
-1

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

 <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>
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню