Javascript 如何在单击时正确显示/隐藏移动菜单
我有这个html来显示一个菜单和移动版本的菜单。但是,移动版本无法正常工作。您知道只显示菜单svg图标需要什么吗?首先隐藏移动菜单,然后在打开菜单的按钮上单击显示移动菜单和关闭svg图标 由于是在移动版本上,菜单已显示为打开,但按钮不隐藏菜单 例如: HTMLJavascript 如何在单击时正确显示/隐藏移动菜单,javascript,jquery,css,tailwind-css,Javascript,Jquery,Css,Tailwind Css,我有这个html来显示一个菜单和移动版本的菜单。但是,移动版本无法正常工作。您知道只显示菜单svg图标需要什么吗?首先隐藏移动菜单,然后在打开菜单的按钮上单击显示移动菜单和关闭svg图标 由于是在移动版本上,菜单已显示为打开,但按钮不隐藏菜单 例如: HTML 要做到这一点,您需要Javascript。使用变量isOpen,检查其是否打开(true)或关闭(false),并在此基础上控制导航和按钮 Tailwind不提供Javascript,但提供html注释,用于获得所需的打开和关闭效果
要做到这一点,您需要Javascript。使用变量
isOpen
,检查其是否打开(true
)或关闭(false
),并在此基础上控制导航和按钮
Tailwind不提供Javascript,但提供html注释,用于获得所需的打开和关闭效果
<div class="relative bg-gray-50 overflow-hidden">
<div class="max-w-7xl mx-auto">
<div class="relative z-10 pb-8 bg-gray-50 sm:pb-16 md:pb-20 lg:max-w-2xl lg:w-full lg:pb-28 xl:pb-32">
<div class="relative pt-6 px-4 sm:px-6 lg:px-8">
<nav class="relative flex items-center justify-between sm:h-10 lg:justify-start" aria-label="Global">
<div class="flex items-center flex-grow flex-shrink-0 lg:flex-grow-0">
<div class="flex items-center justify-between w-full md:w-auto">
<div class="flex">
<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 id="aboutUs" href="#" class="font-medium text-gray-500 hover:text-gray-900">Link 1</a>
<a id="ourTeam" href="#" class="font-medium text-gray-500 hover:text-gray-900">Link 2</a>
<a id="blog" href="#" class="font-medium text-gray-500 hover:text-gray-900">Link 3</a>
<a href="#" class="contact font-medium">Link 4</a>
</div>
</nav>
</div>
<!--
Mobile menu, show/hide based on menu open state.
Entering: "duration-150 ease-out"
From: "opacity-0 scale-95"
To: "opacity-100 scale-100"
Leaving: "duration-100 ease-in"
From: "opacity-100 scale-100"
To: "opacity-0 scale-95"
-->
<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>
<!-- Heroicon name: outline/x -->
<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>
<svg id="open-mobile-nav-btn" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 " viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd" />
</svg>
</button>
</div>
</div>
<div class="px-2 pt-2 pb-3 space-y-1">
<a id="features" 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 id="ourTeam" 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 id="blog" 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>
<a href="#" class="contact block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50">Link4</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>
<span class="block xl:inline">title</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>
</body>
</html>
const nav = document.querySelector('#mobile-nav');
const closeBtn = document.getElementById('close-mobile-nav-btn');
closeBtn.addEventListener('click', () => {
console.log('show/ hide the menu');
});