单击 link 时折叠响应式导航

Question

我正在尝试让我的响应式导航在单击导航项 (link) 时折叠。

这是我的导航：

<nav class="nav">
 <ul>
  <li class="nav-item"><a href="#overview">Overview</a></li>
  <li class="nav-item"><a href="#amenities">Amenities</a></li>
  <li class="nav-item"><a href="#residences">Residences</a></li>
  <li class="nav-item"><a href="#neighborhood">Neighborhood</a></li>
  <li class="nav-item"><a href="#availability">Availability</a></li>
  <li class="nav-item"><a href="#contact">Contact</a></li>
  <a href="#" target="_blank"><li class="btn login">Login</li></a>
  <a href="javascript:void(0);" onclick="myFunction()"><li class="nav-toggle"></li></a>
 </ul>
</nav>

响应式导航的展开方式如下：

<script>
  function myFunction() {
  document.getElementsByClassName("nav")[0].classList.toggle("responsive");
  }
</script>

Answer 1

我不确定您为什么要将旧学校列表标签与现代导航混合使用，因为您不需要它们。

如果您希望菜单在选择时折叠，您可以使用这个巧妙的技巧：

<nav style="position:absolute; left:20px; top:50px;">

<div onclick="TheBox.removeAttribute('open');">

<details id="TheBox"><summary>Choices</summary>

<a href="javascript:void(0)" target="_blank" title="">Home</a><br>
<a href="javascript:void(0)" target="_blank" title="">About</a><br>
<a href="javascript:void(0)" target="_blank" title="">Products</a><br>
<a href="javascript:void(0)" target="_blank" title="">Services</a><br>
<a href="javascript:void(0)" target="_blank" title="">Contact</a>

</div></details></nav>

Answer 2

您似乎想在点击开关 link 时隐藏导航。如果是这样，我将执行以下操作。请注意，您的 <a> 标签在 <li> 标签之外，我已将它们移到里面。

<nav id="nav">
 <ul>
  <li class="nav-item"><a href="#overview">Overview</a></li>
  <li class="nav-item"><a href="#amenities">Amenities</a></li>
  <li class="nav-item"><a href="#residences">Residences</a></li>
  <li class="nav-item"><a href="#neighborhood">Neighborhood</a></li>
  <li class="nav-item"><a href="#availability">Availability</a></li>
  <li class="nav-item"><a href="#contact">Contact</a></li>
  <li class="btn login"><a href="#" target="_blank">Login</a></li>
  <li class="nav0item"><a href="javascript:collapseNav();">Toggle</a></li>
 </ul>
</nav>

我会按 ID 而不是 class 定位，并将显示设置为 none。

<script type="text/javascript">
function collapseNav() {
  document.getElementById('nav').style.display = "none";}
</script>

由于您的切换开关位于导航内的 <li> 上，因此您的导航菜单（和切换开关）将在激活时隐藏。所以，我想办法再次展示它。例如，您可以在您的 JS 中添加此功能。

function showNav() {
  document.getElementById('nav').style.display = "block";}

然后在某处添加一个 link 供用户再次显示菜单。

<button onclick="showNav();" >Show Menu</button>

如果你走那条路，我也会默认隐藏“显示菜单”按钮，方法是添加 id="shownav" style="display: none;" 以最初隐藏它。然后让你的 collapseNav 函数也显示按钮：

document.getElementById('shownav').style.display = "block";

Answer 3

感谢您的回复。这就是我要找的：

$(document).ready(function(){
  $("li.nav-item a, .logo").click(function(){
   $("nav").removeClass("responsive");
  });
});

现在 "responsive" class 在单击导航项或徽标时会被删除，因此我的导航 returns 进入折叠模式。

单击 link 时折叠响应式导航

Collapse responsive nav when clicking link

html

javascript

nav

responsive-design