Панель навигации JavaScript

Я пишу код для открытия и закрытия панели навигации с помощью кнопки мой код выглядит следующим образом

#DIV1{
    display:block;}

        <div id = "DIV1">
        <ul class = "topnav">
          <li><a href = "#about">About</a></li>
          <li><a href = "#contact">Contact</a></li>
          <li><a href = "#news">News</a></li>
          <li><a href = "#home">Home</a></li>
          </ul>

        </div>
        <button  onClick = "abc()">HIDE</button>
    <script>
    function abc()
    {
        var togg = document.getElementById('DIV1')
         if (togg.style.display == "block")
        {
            togg.style.display = "none";
        }

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

    }
    </script>

Не получится, что мне делать или что я делаю не так? Есть и другие свойства CSS для панели навигации, которые я пропустил.

javascript html css

28.10.2018 00:03

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

136

Ответы 3

вот правильный код:

<style> #DIV1{
    display:block;}
</style>

        <div id = "DIV1">
        <ul class = "topnav">
          <li><a href = "#about">About</a></li>
          <li><a href = "#contact">Contact</a></li>
          <li><a href = "#news">News</a></li>
          <li><a href = "#home">Home</a></li>
          </ul>

        </div>
        <button  onClick = "abc()">HIDE</button>
    <script>
    function abc()
    {
        var togg = document.getElementById('DIV1');
         if (togg.style.display == "block")
        {
            togg.style.display = "none";
        }

        else 
        {
           togg.style.display = "block";
        }

    }
    </script>

Лучше всего объяснить, в чем разница и почему это решает проблему.

— 28.10.2018 00:23

Первый щелчок по скрытию не скрывает навигацию. Второй щелчок делает.

— 28.10.2018 02:48

28.10.2018 00:20

если я понял ваш вопрос, попробуйте этот:

    <!DOCTYPE html>
    <html lang = "en">
    <head>
    <style>
     #div1{
        display:block;}
    </style>
            
        <script>
        function abc()
        {
            var togg = document.getElementById("div1")
             if (togg.style.display === "none")// 3 === 
            {
                togg.style.display = "block";
            }

            else {
    		togg.style.display = "none";
            }

        }
        </script>

    </head>
    <body>
    <div id = "div1">
            <ul class = "topnav">
              <li><a href = "#about">About</a></li>
              <li><a href = "#contact">Contact</a></li>
              <li><a href = "#news">News</a></li>
              <li><a href = "#home">Home</a></li>
              </ul>

            </div>
            <button  onclick = "abc()">HIDE</button>
    </body>
    </html>

28.10.2018 00:22

Это не работает, потому что вам нужно настроить его отображение с помощью javascript или встроенного стиля, чтобы получить что-то с помощью yourDiv.style.display. В вашем случае, когда вы нажимаете на свою кнопку, отображение не устанавливается, и тогда вы не можете ввести ни свой if ни в своем выписке else if. Так что попробуйте это:

var togg = document.getElementById('DIV1');
togg.style.display = "block"; /* => I set a display value */

function abc(){
   if (togg.style.display == "block")
  {
      togg.style.display = "none";
  }

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

}

#DIV1 {
   display:block;
}
/*you can remove this rule. You are changing the display via javascript */

<div id = "DIV1">
<ul class = "topnav">
  <li><a href = "#about">About</a></li>
  <li><a href = "#contact">Contact</a></li>
  <li><a href = "#news">News</a></li>
  <li><a href = "#home">Home</a></li>
</ul>

</div>
<button  onClick = "abc()">HIDE</button>

Другой способ: вы можете просто создать класс, чтобы «скрыть» ваш div, а затем переключать его с помощью classList и toggle:

function abc(){
    var togg = document.getElementById('DIV1')
    togg.classList.toggle("myClass");
}

.myClass {
   display:none;
}

<div id = "DIV1">
  <ul class = "topnav">
    <li><a href = "#about">About</a></li>
    <li><a href = "#contact">Contact</a></li>
    <li><a href = "#news">News</a></li>
    <li><a href = "#home">Home</a></li>
  </ul>
</div>
<button  onClick = "abc()">HIDE</button>

ты классный <3

— 30.10.2018 18:19

28.10.2018 00:49