Question

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

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

编辑：以下是我的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，无论如何都可以这样做...请您发布任何代码来帮助您吗？

Answer 2

我添加了一个新功能localhost/phpmyadmin，如下所示：

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()

并且在子菜单项ABOUT href中添加了以下// 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", ""); } }：

onClick

如何在单击锚点链接后自动关闭响应式导航栏菜单？

2 个答案: