angularjs - 使用 Tailwind 的交互式汉堡菜单

Question

单击汉堡包SVG后，我想实现一个下拉菜单。我将 Tailwind 与TALL Stack一起使用。我遇到的大多数 Tailwind 教程或帖子都使用了我在这个项目中没有使用的 Vue.Js。

这是我的代码，我希望有人能指出我正确的方向。

<button type="button" id="hamburgerbtn" class="hover:text-white focus:outline-none focus:text-white">

<div class="hidden mt-3 md:flex md:flex-row" id="mobileMenu">

<style>
    .active{
        display: block;
    }    
</style>

<script>
    let hamburger = document.getElementById('hamburgerbtn');
    let mobileMenu = document.getElementById('mobileMenu');

    hamburger.addEventListener('click', function(){
        mobileMenu.classList.toggle('active');
    });
</script>

Answer 1

解决方案

这是切换菜单的Javascript：

<script>
    document.getElementById('nav-toggle').onclick = function(){
        document.getElementById("nav-content").classList.toggle("hidden");
    }
</script>

<nav id="menu-toggle" 
<button type="button" id="hamburgerbtn"> 
<div class="hidden mt-3 md:flex md:flex-row" id="mobileMenu">

<style>
  .active {
    display: block;
  }
</style>

<script type=module>
  let hamburger = document.querySelector('#hamburgerbtn') 
  let mobileMenu = document.querySelector('#mobileMenu')

  hamburger.addEventListener('click', event => mobileMenu.classList.toggle('active')
  )  
</script>