Блог

Главная - Вопросы по программированию - Попытка создать меню для гамбургеров с помощью jQuery

Попытка создать меню для гамбургеров с помощью jQuery

#html #jquery #css

#HTML #jquery #css

Вопрос:

Я пытаюсь создать меню для гамбургеров. Когда я нажимаю на три строки, я не получаю «x». Я думаю, что у меня есть классы, названные правильно. Если вам нужно больше кода, я могу предоставить и это.

 $('.js--nav-icon').click(function() {
  var nav = $('.js--main-nav');
  var icon = $('.js--nav-icon');
  nav.slideToggle(200);
  if (icon.hasClass('.menu-outline')) {
    icon.addClass('.close-outline');
    icon.removeClass('.menu-outline');
  } else {
    icon.addClass('.menu-outline');
    icon.removeClass('.close-outline');
  }
}); 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
  <img src="Resources/img/logo-white.png" alt="Omnifood logo" class="logo">
  <img src="Resources/img/logo.png" alt="Omnifood logo" class="logo-black">
  <ul class="main-nav js--main-nav">
    <li><a href="#features">Food delivery</a></li>
    <li><a href="#works">How it works</a></li>
    <li><a href="#cities">Our cities</a></li>
    <li><a href="#plans">Sign up</a></li>
  </ul>
  <ion-icon class="mobile-nav-icon js--nav-icon" name="menu-outline"></ion-icon>
</div>

Ответ №1:

Вы не должны использовать точку (.) в функциях jQuery hasClass, addClass, removeClass . удалите эти точки:

 if (icon.hasClass('menu-outline')) {
    icon.addClass('close-outline');
    icon.removeClass('menu-outline');
} 
else {
   icon.addClass('menu-outline');
   icon.removeClass('close-outline');
}

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

1. он по-прежнему делает то же самое, я удалил точку (.) из функций класса, но при нажатии на нее меню гамбургеров не переходит в x.

Ответ №2:

Пожалуйста, удалите (.), как показано ниже:

 icon.addClass('close-outline');

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

1. Также используйте toggleClass() вместо того, чтобы проверять наличие hasClass()