Блог

Главная - Вопросы по программированию - Свойство видимости Css не будет переключаться при запуске функции click в Javascript (HTML / CSS / Javascript)

Свойство видимости Css не будет переключаться при запуске функции click в Javascript (HTML / CSS / Javascript)

#javascript #responsive #hamburger-menu #responsive-navigation

#javascript #отзывчивый #гамбургер-меню #отзывчивый-навигация

Вопрос:

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

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

При окончательной настройке меню не отображается, так как я указал, чтобы его не было в коде, но когда я нажимаю на кнопку menu, меню не переключается.

Вот мой код:

 const ul = document.querySelector('.menu ul');

burger.addEventListener('click', () => {
  ul.classList.toggle('change');
}); 
 .menu ul {
  position: absolute;
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  visibility: hidden;
}

.change {
  visibility: visible;
}

.burger {
  cursor: pointer;
  display: inline-block;
  align-items: center;
  justify-content: flex-end;
  position: fixed;
} 
 <div class="menu">
  <nav>
    <ul class>
      <li><a href="home.html">Home</a></li>
      <li><a href="home.html">Men</a></li>
      <li><a href="home.html">Women</a></li>
      <li><a href="home.html">Accessories</a></li>
      <li><a href="about.html">About</a></li>
      <li><a href="contact.html">Contact</a></li>
    </ul>
    <div class="burger">
      <div class="bar"></div>
    </div>
  </nav>
</div>

Пожалуйста, что-нибудь помогает:’)

Ответ №1:

Вам необходимо повысить специфичность меню, поскольку вы объявили начальные стили для неупорядоченного списка с большей специфичностью, чем .change класс.

 const ul = document.querySelector('.menu ul');
const burger = document.querySelector('.burger');
burger.addEventListener('click', () => {
  ul.classList.toggle('change');
}); 
 .menu ul {
  position: absolute;
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  visibility: hidden;
}

.menu ul.change {
  visibility: visible;
}

.burger {
  cursor: pointer;
  display: inline-block;
  align-items: center;
  justify-content: flex-end;
  position: fixed;
}
.bar {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: #000;
} 
 <div class="menu">
  <nav>
    <ul class>
      <li><a href="home.html">Home</a></li>
      <li><a href="home.html">Men</a></li>
      <li><a href="home.html">Women</a></li>
      <li><a href="home.html">Accessories</a></li>
      <li><a href="about.html">About</a></li>
      <li><a href="contact.html">Contact</a></li>
    </ul>
    <div class="burger">
      <div class="bar"></div>
    </div>
  </nav>
</div>