如何解决使用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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。