使用 Tailwind 的交互式汉堡菜单答案

【问题标题】：Interactive hamburger menu using Tailwind使用 Tailwind 的交互式汉堡菜单
【发布时间】：2020-12-09 21:30:45
【问题描述】：

单击汉堡包 SVG 后，我想实现一个下拉菜单。我正在使用带有 TALL Stack 的 Tailwind。我遇到的大多数 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>

【问题讨论】：

标签： angularjs tailwind-css laravel-livewire

【解决方案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>

【讨论】：