Question

我有一个涵盖整个页面的菜单导航。单击链接时如何使其消失？

我的代码如下：

HTML CODE

 <div class="button_container" id="toggle">
  <span class="top"></span>
  <span class="middle"></span>
  <span class="bottom"></span>
    <p>Menu</p>
</div>

<div class="overlay" id="overlay">
  <nav class="overlay-menu" id ="overlay-menu" >
    <ul>
      <li ><a href="#home" >HOME</a></li>
      <li><a href="#about" data-toggle="collapse" data-target=".overlay" >ABOUT US</a></li>
        <li><a href="services">SERVICES</a></li>
      <li><a href="#portfolio" >PORTFOLIO</a></li>
        <li><a href="#">ENQUIRY FORM</a></li>
        <li><a href="#">CONTACT</a></li>
    </ul>
  </nav>
</div>

点击菜单图标时的样子 https://gyazo.com/24c86c1b1be45e18435ab275f550377c

我试图使用data-toggle属性，但它会产生不寻常的结果。

 <li><a href="#about" data-toggle="collapse" data-target=".navbar-collapse" >ABOUT US</a></li>

结果 - 最后三个链接位于顶部 https://gyazo.com/bed757689c2a8c41cb8c7be25cc4008c

Answer 1

您可以使用jquery实现此目的：

$("#overlay-menu ul li a").click(function() {
     $("#overlay-menu").hide();
});

Answer 2

最简单的方法是使用jQuery

$('#overlay-menu ul li a').click(function(){
   $(this).closest('.overlay').hide();
   $(this).closest('.overlay-menu').hide();
});

单击链接时如何使导航栏消失

2 个答案: