单击移动菜单切换

Question

我有这个html来显示菜单和移动版本的菜单，但是移动版本不起作用，你知道什么是必要的吗？由于它在移动版上，菜单已经显示为打开状态，并带有关闭按钮，但按钮不会隐藏菜单。

HTML:

<span class="text-xl text-3xl font-bold">logo</span>
</div>
<div class="-mr-2 flex items-center md:hidden">
<button type="button" class="bg-white rounded-md p-2 inline-flex items-center justify-center text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500" aria-expanded="false">
<span class="sr-only">Open main menu</span>

</button>
</div>
</div>
</div>
<div class="hidden md:block md:ml-10 mt-2 md:pr-4 md:space-x-8">
<a href="#" class="font-medium text-gray-500 hover:text-gray-900">Link 1</a>
<a href="#" class="font-medium text-gray-500 hover:text-gray-900">Link 2</a>
</div>
</nav>
</div>
<div class="absolute top-0 inset-x-0 p-2 transition transform origin-top-right md:hidden">
<div class="rounded-lg shadow-md bg-white ring-1 ring-black ring-opacity-5 overflow-hidden">
<div class="px-5 pt-4 flex items-center justify-between">
<div class="flex">


<span class="text-xl text-3xl font-bold text-gray-600">logo</span>
</div>
<div class="-mr-2">
<button type="button" class="bg-white rounded-md p-2 inline-flex items-center justify-center text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500">
<span class="sr-only">Close main menu</span>
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
<div class="px-2 pt-2 pb-3 space-y-1">
<a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50">Link 1</a>
<a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50">Link 2</a>
<a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50">Link 3</a>
</div>
</div>
</div>
<main class="mt-10 mx-auto max-w-7xl px-4 sm:mt-12 sm:px-6 md:mt-16 lg:mt-20 lg:px-8 xl:mt-28">
<div class="sm:text-center lg:text-left">
<h1 class="text-4xl tracking-tight font-extrabold text-gray-600 sm:text-5xl md:text-6xl">
<span class="block xl:inline">Test</span>
</h1>
</div>
</main>
</div>
</div>
<div class="lg:absolute lg:inset-y-0 lg:right-0 lg:w-1/2">
<img class="h-56 w-full object-cover sm:h-72 md:h-96 lg:w-full lg:h-full" src="https://images.unsplash.com/" alt="">
</div>
</div>

Answer 1

您将不得不使用一些javascript来实现这一点。

在你的移动导航上，你会想这样做：

<button id="toggle-mobile-nav-btn">Toggle nav</button>
<nav id="mobile-nav" class="hidden">
<!-- Nav content -->
</nav>

然后，在js中，您需要创建一个事件侦听器，当用户在切换按钮上生成click事件时，该侦听器将运行。(我将其封装在DOMContentLoaded事件侦听器中，以确保在执行脚本之前加载了整个DOM(。

document.addEventListener('DOMContentLoaded', () => {
const nav = document.querySelector('#mobile-nav');
const toggleBtn = document.querySelector('#toggle-mobile-nav-btn');
toggleBtn.addEventListener('click', () => {
// On click, we toggle the hidden class on the navigation
nav.classList.toggle('hidden');
console.log('Nav toggled!);
});
})

这应该会切换您的导航。您可以创建一个自定义css类(而不是Tailwind的hidden类(来将转换添加到导航中。这样，你可以添加不错的效果，如滑动等