Question

用户点击某个链接后如何关闭菜单？这是一个代码：

Jquery：

$(document).ready(function () {
  $(".fa-bars").on("click", function () {
    $("nav ul").toggleClass("showing");
});

CSS：

@media (max-width: 580px) {
  nav ul {
  max-height: 0px;
  position: relative;
  top: 62px;
  }
.showing {
  max-height: 20em;
  position: relative;
  top: 62px;
  }
nav ul li {
  width: 100%;
  padding: 15px;
  text-align: center;
  }
nav a:hover::before {
  width: 0;
  }
.menu-icon {
  display: block;
  }
}

感谢任何形式的帮助。

Answer 1

尝试这样的事情：

$(document).ready(function(){
    $('.fa-bars').on('click', function(){
    $('nav ul#menu').toggleClass('show-menu');
  })
  $('nav ul#menu a').on('click', function(){
    $('nav ul#menu').toggleClass('show-menu');
  })
});

https://jsfiddle.net/e0rpuohx/1/

Answer 2

要获得更具体的答案，我们需要查看一些HTML ...但这可能会让您顺利进行。

提供您想要隐藏ID的内容，并为链接提供onclick功能。然后在函数中获取ID，并将display设置为none。

function closeMenu() {
    document.getElementById("menu").style.display = "none";
}

<nav>
  <ul id="menu">
    <a href="#home">HOME</a>
    <a href=#projects">PROJECTS</a>
    <a href=#projects">INFO</a>
    <a href=#contact">CONTACT</a>
    <button onclick="closeMenu()">Close Menu</button>
  </ul>
 </nav>

单击后关闭菜单 - jquery

2 个答案: