javascript - 单击列表项后关闭导航菜单(javascript、css、html)

Question

我为移动用户构建了一个导航菜单。我希望在单击列表项后立即关闭菜单。这怎么可能？

$(document).ready(function() {
  $('.menu-toggle').click(function() {
    $('header nav').toggleClass('active');
  });
});

header {
  display: block;
  left: 0px;
  border-radius: 0px;
  width: 100%;
  height: 50px;
  margin-left: 0px;
  margin-right: 0px;
  margin-top: 0px;
  top: 0;
  right: 0;
  background: white;
  z-index: 2;
}

header nav {
  position: fixed;
  width: 100%;
  height: calc(100vh - 50px);
  background-color: #ffffff;
  top: 50px;
  left: 0;
  transition: 0.5s;
}

header nav.active {
  left: -100%;
}

header nav ul li {
  float: none;
  display: block;
  padding-bottom: 15px;
  text-align: center;
  font-size: 25px;
  font-family: 'Roboto', sans-serif;
  font-weight: lighter;
}

header nav ul li a {
  font-size: 25px;
}

header nav ul a li:hover {
  padding-top: 0px;
  color: #3ECB8A;
}

.menu-toggle {
  display: block;
  margin-right: 15px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>

  <nav id="main-nav" class="active">
    <ul>
      <a href="#">
        <li>Home</li>
      </a>
      <a href="#about">
        <li>About</li>
      </a>
      <a href="#work">
        <li>Work</li>
      </a>
      <a href="#contact">
        <li>Contact</li>
      </a>
    </ul>
  </nav>

  <div class="menu-toggle">
    <i class="fa fa-bars">icon</i>
  </div>

</header>

Answer 1

您可以监听链接上的点击，并在显示/隐藏菜单时切换事件类。例如:

$('header nav a').click(function(){
    $('header nav').toggleClass('active');
  })