使用Tailwind的交互式汉堡菜单

问题描述

单击汉堡SVG后，我想获得一个下拉菜单。 我正在将Tailwind与TALL Stack一起使用。我遇到的大多数Tailwind教程或帖子都是使用Vue.J，而我在该项目中没有使用过。

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

<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">

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

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

    let mobileMenu = document.getElementById('mobileMenu');

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

解决方法

解决方案

        //Javascript to toggle the menu
        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>