菜单设计响应

Question

问候！！！！

我在设计响应方面遇到了麻烦，每个参考都运行良好，但是当我输入任何菜单选项时菜单保持打开状态，如下所示：

所以，我希望当我进入任何菜单选项时，它会自动关闭。

这是代码：

$(document).ready(main);

var contador = 1;

function main() {
  $('.menu_bar').click(function() {

    if (contador == 1) {
      $('nav').animate({
        left: '0'
      });
      contador = 0;
    } else {
      contador = 1;
      $('nav').animate({
        left: '-100%'
      });
    };

  });
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w==" crossorigin="anonymous" />
<style>
  @media screen and (max-width:800px) {
    header nav {
      width: 80%;
      height: 100%;
      margin: 0;
      position: fixed;
      left: -100%;
      overflow: auto;
    }
    .menu_bar {
      display: block;
      width: 100%;
      background: #ccc;
    }
    .menu_bar .bt-menu {
      display: block;
      padding: 20px;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      background: #024959;
      overflow: hidden;
      font-size: 25px;
      font-weight: bold;
      color: #fff;
      text-decoration: none;
    }
    .menu_bar span {
      float: right;
      font-size: 40px;
    }
    header nav ul li {
      display: block;
      float: none;
      border-bottom: 1px solid rgba(255, 255, 255, .3);
    }
  }
</style>

<header>
  <div class="menu_bar">
    <a href="#" class="bt-menu"><span class="icon-list2"></span>Menu</a>
  </div>

  <nav>
    <ul>
      <li><a href="#"><span class="icon-house"></span>Inicio</a></li>
      <li><a href="#"><span class="icon-suitcase"></span>Trabajos</a></li>
      <li><a href="#"><span class="icon-rocket"></span>Proyectos</a></li>
      <li><a href="#"><span class="icon-earth"></span>Servicios</a></li>
      <li><a href="#"><span class="icon-mail"></span>Contactos</a></li>
    </ul>
  </nav>
</header>

所以，它正在发生，菜单响应正在工作，每个菜单选项的每个 href 都指向同一页面，我的意思是，我只有一个页面“index.html”和每个菜单选项，这些是指一个特定的“Id”，那我该怎么办？这样，当您单击任何菜单选项时，它会找到单击的选项并自动关闭菜单。

Answer 1

您只是在“.menu_bar”上收听点击事件。 您应该为菜单上的项目添加一个事件侦听器，然后处理该事件，在您的情况下，隐藏菜单。

$(document).ready(main);

var contador = 1;

function main() {
  $('.menu_bar').click(function() {

    if (contador == 1) {
      $('nav').animate({
        left: '0'
      });
      contador = 0;
    } else {
      contador = 1;
      $('nav').animate({
        left: '-100%'
      });
    };

  });
    $('.menu-link').click(function() {
        contador = 1;
        $('nav').animate({  left: '-100%' });
    });
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w==" crossorigin="anonymous" />
<style>
  @media screen and (max-width:800px) {
    header nav {
      width: 80%;
      height: 100%;
      margin: 0;
      position: fixed;
      left: -100%;
      overflow: auto;
    }
    .menu_bar {
      display: block;
      width: 100%;
      background: #ccc;
    }
    .menu_bar .bt-menu {
      display: block;
      padding: 20px;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      background: #024959;
      overflow: hidden;
      font-size: 25px;
      font-weight: bold;
      color: #fff;
      text-decoration: none;
    }
    .menu_bar span {
      float: right;
      font-size: 40px;
    }
    header nav ul li {
      display: block;
      float: none;
      border-bottom: 1px solid rgba(255, 255, 255, .3);
    }
  }
</style>

<header>
  <div class="menu_bar">
    <a href="#" class="bt-menu"><span class="icon-list2"></span>Menu</a>
  </div>

  <nav>
    <ul>
      <li><a class="menu-link" href="#"><span class="icon-house"></span>Inicio</a></li>
      <li><a class="menu-link" href="#"><span class="icon-suitcase"></span>Trabajos</a></li>
      <li><a class="menu-link" href="#"><span class="icon-rocket"></span>Proyectos</a></li>
      <li><a class="menu-link" href="#"><span class="icon-earth"></span>Servicios</a></li>
      <li><a class="menu-link" href="#"><span class="icon-mail"></span>Contactos</a></li>
    </ul>
  </nav>
</header>