Меню гамбургеров Toggle Javascript - PullRequest
Новая
       14

Меню гамбургеров Toggle Javascript

0 голосов
/ 19 февраля 2019

Я пытался создать отзывчивую навигационную панель с переключателем меню гамбургера.Сделал это с помощью учебника, который я нашел в Интернете, и все работает, кроме переключателя для меню.Когда я нажимаю на иконку, ничего не происходит.Я довольно новичок в этом, поэтому я не знаю, что для этого сделать.

$(document).ready(function() {
  $('nav-menu').click(function() {
    $('ul').toggleClass('nav-active');
  })
})
.section.menu ul {
  display: none;
}

ul.nav-active {
  display: block !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" />
<div class='section menu'>
  <nav>
    <div class="toggle">
      <i class="fa fa-bars nav-menu" aria-hidden="true"></i>
    </div>
    <ul>
      <li><a href="#jumpcontent">Über Uns</a></li>
      <li><a href="#jumplogin">Login</a></li>
      <li><a href="#jumpfeedback">Referenzen</a></li>
      <li><a href="#jumpcontact">Kontakt</a></li>
    </ul>
  </nav>
</div>

Ответы [ 3 ]

0 голосов
/ 19 февраля 2019 
<div class='section menu'>
   <nav>
      <div class="toggle">
       <i class="fa fa-bars nav-menu" aria-hidden="true">Toggle Menu</i>
    </div>
   <ul>
   <li><a href="#jumpcontent">Über Uns</a></li>
   <li><a href="#jumplogin">Login</a></li>
   <li><a href="#jumpfeedback">Referenzen</a></li>
   <li><a href="#jumpcontact">Kontakt</a></li>
     </ul>
    </nav>
   </div>

 $(document).ready(function(){
   $('.toggle').click(function(){
  $('ul').toggleClass('nav-active');
 });
 });
0 голосов
/ 19 февраля 2019

Вам нужно использовать правильный селектор $('.nav-menu'): 

$(document).ready(function(){
  $('.nav-menu').click(function(){
    $('ul').toggleClass('nav-active');
  })
})
.section.menu ul {
  display: none;
}

ul.nav-active {
  display: block !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" />
<div class='section menu'>
   <nav>
     <div class="toggle">
       <i class="fa fa-bars nav-menu" aria-hidden="true"></i>
     </div>
     <ul>
       <li><a href="#jumpcontent">Über Uns</a></li>
       <li><a href="#jumplogin">Login</a></li>
       <li><a href="#jumpfeedback">Referenzen</a></li>
       <li><a href="#jumpcontact">Kontakt</a></li>
     </ul>
   </nav>
 </div>
0 голосов
/ 19 февраля 2019

Ваш щелчок триггера имеет неправильный селектор.Вы используете $('nav-menu'), что означает, что jQuery ищет все теги <nav-menu></nav-menu>, но я думаю, что вы хотите класс nav-menu, поэтому вы должны использовать $('.nav-menu'). 

$(document).ready(function() {
    // .nav-menu select tags with the class nav-menu
    // nav-menu select nav-menu tags
    // #nav-menu the tag with the id nav-menu
    $('.nav-menu').click(function() {
        $('ul').toggleClass('nav-active');
        // to check in your console you can do :
        console.log('click triggered on nav-menu');
    });
}

Вот селекторы дляJQuery .

...