如何使用 javascript 在小屏幕上默认隐藏导航栏中的导航链接?
How can I use javascript to hide by default the navigation links in my navbar on small screens?
我使用 tailwind css 设置了我的 navber,并且能够使其响应。当在较小的屏幕上查看时,导航链接以弹性块的方式显示在彼此下方。但是,当在移动视口中查看时,默认情况下会显示导航链接。实现了一个可以单击以显示和隐藏它的按钮,但我如何使用 javascript 实际编写代码使其工作?这是我的代码片段:
<script src="https://cdn.tailwindcss.com"></script>
<!--Navbar-->
<nav id="navbar" class="fixed inset-x-0 flex flex-center justify-between flex-wrap p-5 lg:mx-10 lg:mt-5 shadow-xl rounded-lg">
<div class="flex items-center flex-shrink-0 text-green-600 mr-6">
<img class="fill-current h-8 w-8 mr-2" src="images/Logo.svg" alt="Logo" width="20">
<span class="font-bold text-2xl tracking-tight">First Last</span>
</div>
<div class="block md:hidden">
<button class="flex items-center px-3 py-2 border rounded hover:text-green-300 hover:border-green-300">
<svg class="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Menu</title><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/></svg>
</button>
</div>
<div class="w-full block md:flex md:items-center md:w-auto">
<div class="text-sm md:flex-grow">
<a href="#school" class="block mt-4 md:inline-block md:mt-0 hover:text-green-300 mr-4">About</a>
<a href="#skills" class="block mt-4 md:inline-block md:mt-0 hover:text-green-300 mr-4">Skills</a>
<a href="#projects" class="block mt-4 md:inline-block md:mt-0 hover:text-green-300 mr-4">Projects</a>
<a href="#experience" class="block mt-4 md:inline-block md:mt-0 hover:text-green-300 mr-4">Experience</a>
</div>
</div>
</nav>
Image of Navbar seen from the mobile view
- 将
block md:flex
更改为 hidden md:flex
,这将隐藏移动屏幕上的菜单。
- 然后您可以使用
Element.classList.toggle
在移动屏幕上单击按钮时切换 hidden
class。
试试这个
document.addEventListener('DOMContentLoaded', function(){
let menu = document.getElementById('navbar-menu');
document.getElementById('navbar-toggler').addEventListener('click', event => {
menu.classList.toggle('hidden')
})
})
<script src="https://cdn.tailwindcss.com"></script>
<!--Navbar-->
<nav id="navbar" class="fixed inset-x-0 flex flex-center justify-between flex-wrap p-5 lg:mx-10 lg:mt-5 shadow-xl rounded-lg">
<div class="flex items-center flex-shrink-0 text-green-600 mr-6">
<img class="fill-current h-8 w-8 mr-2" src="images/Logo.svg" alt="Logo" width="20">
<span class="font-bold text-2xl tracking-tight">First Last</span>
</div>
<div class="block md:hidden">
<button class="flex items-center px-3 py-2 border rounded hover:text-green-300 hover:border-green-300" id="navbar-toggler">
<svg class="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Menu</title><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/></svg>
</button>
</div>
<div class="w-full hidden md:flex md:items-center md:w-auto" id="navbar-menu">
<div class="text-sm md:flex-grow">
<a href="#school" class="block mt-4 md:inline-block md:mt-0 hover:text-green-300 mr-4">About</a>
<a href="#skills" class="block mt-4 md:inline-block md:mt-0 hover:text-green-300 mr-4">Skills</a>
<a href="#projects" class="block mt-4 md:inline-block md:mt-0 hover:text-green-300 mr-4">Projects</a>
<a href="#experience" class="block mt-4 md:inline-block md:mt-0 hover:text-green-300 mr-4">Experience</a>
</div>
</div>
</nav>
您可以使用 Javascript 通过其 id select 元素并添加或删除 classes/styles 以实现切换效果。
例如:
const navbar = document.querySelector("#navbar");
if (navbar.classList.contains("something"){
someelement.style.display = "none";
anotherElement.style.display = "block";
navbar.classList.add("someClass");
}
这是一个相同的代码笔示例。
https://codepen.io/ljc-dev/pen/MWoRayy
我使用 tailwind css 设置了我的 navber,并且能够使其响应。当在较小的屏幕上查看时,导航链接以弹性块的方式显示在彼此下方。但是,当在移动视口中查看时,默认情况下会显示导航链接。实现了一个可以单击以显示和隐藏它的按钮,但我如何使用 javascript 实际编写代码使其工作?这是我的代码片段:
<script src="https://cdn.tailwindcss.com"></script>
<!--Navbar-->
<nav id="navbar" class="fixed inset-x-0 flex flex-center justify-between flex-wrap p-5 lg:mx-10 lg:mt-5 shadow-xl rounded-lg">
<div class="flex items-center flex-shrink-0 text-green-600 mr-6">
<img class="fill-current h-8 w-8 mr-2" src="images/Logo.svg" alt="Logo" width="20">
<span class="font-bold text-2xl tracking-tight">First Last</span>
</div>
<div class="block md:hidden">
<button class="flex items-center px-3 py-2 border rounded hover:text-green-300 hover:border-green-300">
<svg class="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Menu</title><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/></svg>
</button>
</div>
<div class="w-full block md:flex md:items-center md:w-auto">
<div class="text-sm md:flex-grow">
<a href="#school" class="block mt-4 md:inline-block md:mt-0 hover:text-green-300 mr-4">About</a>
<a href="#skills" class="block mt-4 md:inline-block md:mt-0 hover:text-green-300 mr-4">Skills</a>
<a href="#projects" class="block mt-4 md:inline-block md:mt-0 hover:text-green-300 mr-4">Projects</a>
<a href="#experience" class="block mt-4 md:inline-block md:mt-0 hover:text-green-300 mr-4">Experience</a>
</div>
</div>
</nav>
Image of Navbar seen from the mobile view
- 将
block md:flex
更改为hidden md:flex
,这将隐藏移动屏幕上的菜单。 - 然后您可以使用
Element.classList.toggle
在移动屏幕上单击按钮时切换hidden
class。
试试这个
document.addEventListener('DOMContentLoaded', function(){
let menu = document.getElementById('navbar-menu');
document.getElementById('navbar-toggler').addEventListener('click', event => {
menu.classList.toggle('hidden')
})
})
<script src="https://cdn.tailwindcss.com"></script>
<!--Navbar-->
<nav id="navbar" class="fixed inset-x-0 flex flex-center justify-between flex-wrap p-5 lg:mx-10 lg:mt-5 shadow-xl rounded-lg">
<div class="flex items-center flex-shrink-0 text-green-600 mr-6">
<img class="fill-current h-8 w-8 mr-2" src="images/Logo.svg" alt="Logo" width="20">
<span class="font-bold text-2xl tracking-tight">First Last</span>
</div>
<div class="block md:hidden">
<button class="flex items-center px-3 py-2 border rounded hover:text-green-300 hover:border-green-300" id="navbar-toggler">
<svg class="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Menu</title><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/></svg>
</button>
</div>
<div class="w-full hidden md:flex md:items-center md:w-auto" id="navbar-menu">
<div class="text-sm md:flex-grow">
<a href="#school" class="block mt-4 md:inline-block md:mt-0 hover:text-green-300 mr-4">About</a>
<a href="#skills" class="block mt-4 md:inline-block md:mt-0 hover:text-green-300 mr-4">Skills</a>
<a href="#projects" class="block mt-4 md:inline-block md:mt-0 hover:text-green-300 mr-4">Projects</a>
<a href="#experience" class="block mt-4 md:inline-block md:mt-0 hover:text-green-300 mr-4">Experience</a>
</div>
</div>
</nav>
您可以使用 Javascript 通过其 id select 元素并添加或删除 classes/styles 以实现切换效果。
例如:
const navbar = document.querySelector("#navbar");
if (navbar.classList.contains("something"){
someelement.style.display = "none";
anotherElement.style.display = "block";
navbar.classList.add("someClass");
}
这是一个相同的代码笔示例。 https://codepen.io/ljc-dev/pen/MWoRayy