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

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(){&nbsp; $('.navTrigger').on('click',function (){&nbsp; &nbsp; $(this).toggleClass('active');&nbsp; &nbsp; console.log("Clicked menu");&nbsp; &nbsp; $("#mainListDiv").toggleClass("show_list");&nbsp; &nbsp; $("#mainListDiv").fadeIn();&nbsp; });});