汉堡菜单切换Javascript

Question

我一直在努力制作一个带有汉堡菜单切换功能的响应式导航栏。我在网上发现了一个教程并且一切正常，除了菜单的切换。当我点击图标时没有任何反应。我对此很陌生，所以我不知道该为此做些什么。

$(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>

Answer 1

您的触发器单击具有错误的选择器。你使用$('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');
    });
}

Here is the selectors for jQuery。

Answer 2

你需要使用正确的选择器$('.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>

Answer 3

<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');
 });
 });