Question

我希望我的自适应导航切换，下面的代码只是将菜单按钮展开到不同的页面。我想切换它，所以现在它只是扩展而不是折叠它。

HTML：

  <nav>
      <a  href="#footer_nav" >&#9776;  MENU</a>
      <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">Opleiding</a></li>
          <li><a href="#">Onderwijsprogramma</a></li>
          <li><a href="#">Organisatie</a></li>
          <li><a href="#">Stages en projecten</a></li>
      </ul>
  </nav>

CSS：

.in-visible {       display：none;       list-style：none;       margin-left：0;       padding-left：0;       margin-bottom：0; }

.visible {       显示：块; }

使用Javascript：

var responsivenav = document.querySelector（＆＃39; header＆gt; nav＆gt; ul＆＃39;）;

responsivenav.classList.add（＆＃39;在可见＆＃39）;

document.querySelector（＆＃39; header＆gt; nav＆gt; a＆＃39;）。onclick = function（）{     responsivenav.classList.add（＆＃39;可见＆＃39）; }

有人可以帮我吗？

Answer 1

您需要使用 toggle 方法而不是add方法。

Demo

var responsivenav = document.querySelector('nav > ul');

responsivenav.classList.add('in-visible');

document.querySelector('nav > a').onclick = function() { 
    responsivenav.classList.toggle('visible');
}

响应式导航菜单Toggle'n

1 个答案:

Demo