汉堡菜单切换 Javascript答案

【问题标题】：Hamburger Menu Toggle Javascript汉堡菜单切换 Javascript
【发布时间】：2019-02-19 15:15:47
【问题描述】：

我一直在尝试制作一个带有汉堡菜单切换的响应式导航栏。用我在网上找到的教程做的，一切正常，除了菜单的切换。当我单击该图标时，没有任何反应。我对此很陌生，所以我不知道该怎么做。

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

【问题讨论】：

我认为您忘记包含示例的 css。正如我所看到的，通过添加或删除 CSS 类来显示或不显示菜单。为您的 ul.nav-active 元素添加正确的样式。

标签： javascript jquery html toggle hamburger-menu

【解决方案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.

【讨论】：

【解决方案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>

【讨论】：

【解决方案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');
 });
 });

【讨论】：

代码需要包含解释。