我不知道为什么，但我的代码不起作用我想制作一个响应式导航栏代码<!doctype html><html> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="css/style.css" type="text/css" media="all" /><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <title></title> </head> <body> <nav class="navbar" id="navbar"><i class="fa fa-bars" aria-hidden="true" onclick="navigation()"></i><a href="#" class="logo">The Big Blog </a> <div id="navLis"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Get Started</a></li> <li><a href="#">Popular Bloggers</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Contact U</a></li> </ul> </div> </nav> <script src="js/app.js" type="text/javascript" charset="utf-8"></script> </body></html>CSS 代码*{ margin: 0; padding: 0; box-sizing: border-box;}li { list-style-type: none;}a { text-decoration: none;}#navLis { display: none;}nav ul{ margin-top: 20px; color: white; background: black;}nav{ height:100px; background: white; border-bottom: 2px solid black; position: relative; background: #8dc09b;}nav li { display: inline-block; padding: 6px;}nav li a { color: white; display: inline-block;}nav i { display: none!important; font-size: 2em!important; position: absolute; top: 10px; right: 10px; transform: translate(-10px); }.logo{ font-size: 25px; margin: 20px; padding: 10px!important;}@media (max-width:668px){ nav { height: 60px; } nav li { text-align: center; display: block; } nav i { display: block!important; }}我的问题是我的 id 为 navLis 的 div 没有显示，我用 JavaScript 编写了当它显示时没有显示块 😡 很简单！当我点击汉堡包时购买，我的导航（）只是让它可见，但是当我再次点击隐藏我的列表时它不起作用
1 回答
慕村225694
TA贡献1880条经验 获得超4个赞
你在那里做了一个小字体：
function navigation() {
const navLis = document.getElementById('navLis');
if (navLis.style.display === 'none') {
navLis.style.display = 'block';
}else{
navLis.style.display = 'none';
}
这应该有效。
要检查 navLis.style.display 是否为“none”，您使用了 =，而不是 === 您分配的是那里的值 none
添加回答
举报
0/150
提交
取消