汉堡菜单切换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>

- hoddypeak

---

我认为您忘记了包含示例的CSS。从我的角度来看，菜单是通过添加或删除CSS类来显示或隐藏的。为您的ul.nav-active元素添加正确的样式。 - Alexis

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

这里是jQuery的选择器。

最初的回答。

- Geoffrey Migliacci

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>

- Alexandre Elshobokshy

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

- Dipak

---

代码需要包含解释。 - Alexandre Elshobokshy