单击锚 link 后，如何让响应式导航栏菜单自动关闭？

Question

我的主页有一页布局。 (http://www.humipack.in )它有几个带有锚点的部分，主菜单项指向同一页面下的那些锚点。现在，当从响应式导航栏图标菜单的子菜单中单击 link 时，它会保持打开状态。

是否有任何配置允许在对同一页面中的锚点位置进行点击后立即关闭响应式菜单？

编辑：下面是我的HTML代码

 <body>


<!-- Navbar -->
<div class="w3-top">
  <div class="w3-bar w3-black w3-card">
<a class="w3-bar-item w3-button w3-padding-large w3-hide-medium w3-hide-large w3-right" href="javascript:void(0)" onclick="myFunction()" 
title="Toggle Navigation Menu" >
<i class="fa fa-bars"></i> </a>
<a href="#" class="w3-bar-item w3-button w3-padding-large">HOME</a>
<a href="#about" class="w3-bar-item w3-button w3-padding-large w3-hide-small">ABOUT US</a>

<div class="w3-dropdown-hover w3-hide-small">
  <button class="w3-padding-large w3-button" title="More" >PRODUCTS <i class="fa fa-caret-down"></i></button>     
  <div class="w3-dropdown-content w3-bar-block w3-card-4">
    <a href="#products" class="w3-bar-item w3-button">White Silica Gel</a>
    <a href="#" class="w3-bar-item w3-button">Blue Silica Gel</a>
    <a href="#" class="w3-bar-item w3-button">Orange Silica Gel</a>
    <a href="#" class="w3-bar-item w3-button">Silica Gel Beads</a>

  </div>
</div>

<a href="#tour" class="w3-bar-item w3-button w3-padding-large w3-hide-small">EXTRAS</a>
<a href="#contact" class="w3-bar-item w3-button w3-padding-large w3-hide-small">CONTACT</a>
<a href="javascript:void(0)" class="w3-padding-large w3-hover-red w3-hide-small w3-right">
<i class="fa fa-search"></i></a>
  </div>
</div>

<!-- Navbar on small screens -->
<div id="navDemo" class="w3-bar-block w3-black w3-hide w3-hide-large w3-hide-medium w3-top" style="margin-top:46px">
  <a href="#about" class="w3-bar-item w3-button w3-padding-large">ABOUT</a>
  <a href="#products" class="w3-bar-item w3-button w3-padding-large">PRODUCTS</a>
  <a href="#contact" class="w3-bar-item w3-button w3-padding-large">CONTACT</a>
  <a href="#" class="w3-bar-item w3-button w3-padding-large">MERCH</a>
</div>

<script>

// Used to toggle the menu on small screens when clicking on the menu button
function myFunction() {
var x = document.getElementById("navDemo");
if (x.className.indexOf("w3-show") == -1) {
    x.className += " w3-show";
} else { 
    x.className = x.className.replace(" w3-show", "");
}
}


</script>


</body>

Answer 1

我想，当你点击这个锚点时。你应该像这样打开导航栏..

$('.nav-collapse').toggle();

如果你使用 JQuery，你可以做到这一点，无论如何......你能post任何代码来帮助你吗？

Answer 2

我添加了一个新函数 myFunction1 如下：

// Used to toggle the menu on small screens when clicking on the sub menu 
item
function myFunction1() {
var x = document.getElementById("navDemo");
x.className = x.className.replace(" w3-show", "");
if (x.className.indexOf("w3-hide-small") == -1) {
    x.className += " w3-hide-small";
} else { 
    x.className = x.className.replace(" w3-hide-small", "");
}
}

并修改 myFunction() 如下：

// Used to toggle the menu on small screens when clicking on the menu button
function myFunction() {
var x = document.getElementById("navDemo");

//added the below line of code
x.className = x.className.replace(" w3-hide-small", "");

if (x.className.indexOf("w3-show") == -1) {
    x.className += " w3-show";
} else { 
    x.className = x.className.replace(" w3-show", "");
}
}

并且还在关于 href 的子菜单项中添加了以下内容 onClick :

 <a href="#about javascript:void(0)" onclick="myFunction1()" class="w3-bar-item w3-button w3-padding-large">ABOUT</a>

单击锚 link 后，如何让响应式导航栏菜单自动关闭？

How to get responsive navbar menu to automatically close after anchor link clicked?

html

javascript

anchor

navbar

drop-down-menu