响应式导航栏菜单（汉堡菜单）无法通过单击打开

Question

有一个导航栏，但问题是当我在手机或响应式环境中打开（单击）它时（当汉堡菜单显示时），它不会通过单击打开，链接也不会显示。下面是我正在使用的代码。使用了必要的链接但不起作用。一切都很好，唯一的问题是汉堡菜单。$('.navTrigger').click(function() {  $(this).toggleClass('active');  console.log("Clicked menu");  $("#mainListDiv").toggleClass("show_list");  $("#mainListDiv").fadeIn();});$(window).scroll(function() {  if ($(document).scrollTop() > 50) {    $('.nav').addClass('affix');    console.log("OK");  } else {    $('.nav').removeClass('affix');  }});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><nav class="nav">  <div class="container">    <div class="logo">      <a href="#"><img src="img" class="ha"></a>    </div>    <div id="mainListDiv" class="main_list">      <ul class="navlinks second">        <li class="a"><a href="#">HOME</a></li>        <li class="b"><a href="#">ABOUT US</a></li>        <li class="c"><a href="#heading-three">OUR SERVICES</a></li>        <li class="d"><a href="#">JOBS</a></li>        <li class="e"><a href="#heading-two">CONTACT US</a></li>      </ul>    </div>    <span class="navTrigger">                <i></i>                <i></i>                <i></i>        </span>  </div></nav><nav class="nav">  <div class="container">    <div class="logo">      <a href="#"><img src="chk2.png" class="hello"></a>    </div>    <div id="mainListDiv" class="main_list">      <ul class="navlinks second">        <li class="a"><a href="#">HOME</a></li>        <li class="b"><a href="#">ABOUT US</a></li>        <li class="c"><a href="#heading-three">OUR SERVICES</a></li>        <li class="d"><a href="index7.html">JOBS AT HEGTAVIC</a></li>        <li class="e"><a href="#heading-two">CONTACT US</a></li>      </ul>    </div>    <span class="navTrigger">                    <i></i>                    <i></i>                    <i></i>            </span>  </div></nav>

Answer 1

我已经尝试过你的代码并按以下方式进行了修改。它运行良好。

$(document).ready(function(){

  $('.navTrigger').on('click',function (){

    $(this).toggleClass('active');

    console.log("Clicked menu");

    $("#mainListDiv").toggleClass("show_list");

    $("#mainListDiv").fadeIn();

  });

});