[英]How to toggle the visibility of a responsive navigation bar?
我正在尝试制作一个响应式导航栏,如果我单击一个按钮(图标),该导航栏是可见的,如果我再次单击此按钮则不可见。 我也用 .addEventListener(click, ...) 试过了,但我就是做不到。 (所以这将是我的首选方式)我认为这是一个非常基本的问题,但我还没有找到解决它的方法。 这是我得到的:
片段:
function toggleNav() { let open = false; if (open == false) { navUl = document.getElementById("navUl"); navUl.style.display = "block"; open = true; } if (open == true) { navUl = document.getElementById("navUl"); navUl.style.display = "none"; open = false; } }
@media screen and (max-width: 800px) { /* nav bar */ #bars { display: block; } nav ul { display: none; } /* heading */ #opener h1, #audioPlayer h1 { font-size: 25px; } }
<!DOCTYPE html> <html lang="de"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="main.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <style> body { background: url(img/acoustic-gtr.jpg); background-repeat: no-repeat; background-size: cover; } </style> <script src="main.js"></script> <title>Musik von Paul</title> </head> <body> <nav> <a href="index.html"><img src="img/gtr-icon.png" alt="gtr-icon"></a> <i class="fa fa-bars" id="bars" onclick="toggleNav()"></i> <ul id="navUl"> <li>CDs <ul> <li><a href="cd1-akustik.html">1. CD: Akustik Gitarre</a></li> <li><a href="cd2-2019.html">2. CD: 2019</a></li> </ul> </li> <li>E-Gitarre <ul> <li><a href="rock-metal.html">Rock & Metal</a></li> </ul> </li> <li>Akustik Gitarre <ul> <li><a href="klassik.html">Klassik</a></li> <li><a href="fingerstyle.html">Fingerstyle</a></li> <li><a href="sonstiges.html">Sonstiges</a></li> </ul> </li> </ul> </nav> <section id="opener"> <h1>Gitarrenaufnahmen von Paul</h1> <br> <a href="cd1-akustik.html">CD 1: Aufnahmen Akustik Gitarre</a> <a href="cd2-2019.html">CD 2: Aufnahmen von 2019</a> </section> </body> </html>
如果元素可见(即 display=='block' ),则可以隐藏该元素。如果是隐藏的(即 display=='none' ),则可以显示该元素。 window.getComputedStyle() 将获取特定元素的 css。
function toggleNav(){
let navUl = document.getElementById("navUl");
// If the element is visible, hide it
if (window.getComputedStyle(navUl).display === 'block') {
navUl.style.display = 'none';
}else{
navUl.style.display = 'block';//if element is not visible then display
}
}
这是变量声明问题,所以只有它在您的代码中不起作用。 我稍微修改了你的代码。 希望这对你有帮助。
let open = false;
function toggleNav(){
if(open==false){
navUl = document.getElementById("navUl");
navUl.style.display="block";
open = true;
}else{
navUl = document.getElementById("navUl");
navUl.style.display="none";
open = false;
}
}
您的代码中有几个拼写错误
open = false
应该声明为全局变量,每次调用toggleNav()
函数时都将open
赋值为false
。您可以直接检查变量是否为真,就像
if (open)
而不是if (open == true)
无需在 if/else 条件中分配
true
或false
,您可以直接分配当前不是的相反数。 像open = !open
所以如果 open 是假的,那么它就会变成真,反之亦然
最终代码会像
let open = false;
function toggleNav() {
open = !open;
if(open){
navUl = document.getElementById("navUl");
navUl.style.display="none";
} else {
navUl = document.getElementById("navUl");
navUl.style.display="block";
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.