javascript - 用 Js 实现响应式可折叠导航栏

Question

嘿，我正在使用 Rails 5、Ruby 2.4.0 和 TailwindCss 构建应用

我正在尝试构建响应式可折叠导航栏，但是我的 JS 不足...

现在我在大屏幕上的导航栏工作正常，在小屏幕和超小屏幕上的导航栏也存在，但是当我单击按钮时不会折叠以显示菜单，我真的不太确定我哪里出了问题。

代码笔:

我的代码:

<nav class="flex items-center justify-between flex-wrap bg-black p-6 nav-fixed">
  <div class="flex items-center flex-no-shrink text-white mr-6"> <!-- Navbar Title Block -->
    <span class="font-semibold text-xl tracking-tight">LoadLead</span>
  </div>
  <div class="block lg:hidden"> <!-- Navbar button -->
    <button class="flex items-center px-3 py-2 border rounded text-white border-white hover:text-white hover:border-white" onclick="toggleHidden('mobile')">
      <i class="fas fa-bars fill-current h-3 w-3"></i>
    </button>
  </div>
  <div class="w-full block flex-grow lg:flex lg:items-center lg:w-auto xs:hidden sm:hidden" id="mobile">
    <div class="text-sm lg:flex-grow">
      <a href="#home" class="block mt-4 lg:inline-block lg:mt-0 text-white hover:text-white hover:font-semibold mr-4 nav-link"> Home </a>
      <a href="#contact" class="block mt-4 lg:inline-block lg:mt-0 text-white hover:text-white hover:font-semibold mr-4 nav-link"> Contact </a>
      <a href="#pricing" class="block mt-4 lg:inline-block lg:mt-0 text-white hover:text-white hover:font-semibold mr-4 nav-link"> Pricing </a>
    </div>
    <div>
      <a href="#SignUp" class="inline-block mt-4 lg:inline-block lg:mt-0 text-white hover:text-white hover:font-semibold mr-4 nav-link">Sign up</a>
    </div>
  </div>
</nav>



function toggleHidden(e) {
    var element = document.getElementById(e);
    element.classList.toggle('hidden');
}

Code Pen Link

Answer 1

您需要确保您的按钮上有一个事件监听器来调用该元素。

var button = document.getElementById('button'); // Assumes element with id='button'

button.onclick = function() {
    var element = document.getElementById('navbar');  // Assumes element has id of #navbar
    element.classList.toggle('hidden');
}

};

编辑: * 不要忘记将导航栏和按钮的 ID 添加到您的 HTML *