如何切换响应式导航栏的可见性？
[英]How to toggle the visibility of a responsive navigation bar?
问题描述
I'm trying to make a responsive navigation bar, which is visible, if I click a button (icon) and is not visible if I click this button again.
我正在尝试制作一个响应式导航栏，如果我单击一个按钮（图标），该导航栏是可见的，如果我再次单击此按钮则不可见。 I've also tried it with .addEventListener(click, ...), but I just can't get it done.我也用 .addEventListener(click, ...) 试过了，但我就是做不到。 (so this would be my preferred way) I think it's a pretty basic question, but I have't found a way to solve it. （所以这将是我的首选方式）我认为这是一个非常基本的问题，但我还没有找到解决它的方法。 Here's what I got:这是我得到的：
Snippet:片段：
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>
3 个解决方案
解决方案1
0 2020-02-12 10:30:37
If the element is visible( ie display=='block' ),the element can be hidden.If it is hidden( ie display=='none' ),the element can be shown.如果元素可见（即 display=='block' ），则可以隐藏该元素。如果是隐藏的（即 display=='none' ），则可以显示该元素。 window.getComputedStyle() will get the css of the particular element. 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
}
}
解决方案2
0 已采纳 2020-02-12 10:32:24
It is Variable declaration issue so only it is not working in your code.这是变量声明问题，所以只有它在您的代码中不起作用。 I have slightly modified your code.我稍微修改了你的代码。 Hope this help you.希望这对你有帮助。
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;
}
}
解决方案3
0 2020-02-12 10:41:33
There are couple of typos in your code您的代码中有几个拼写错误
open = falseshould be declare as global variable, you are assigningopenasfalseevery time you are invokingtoggleNav()function.open = false应该声明为全局变量，每次调用toggleNav()函数时都将open赋值为false。You can directly check if variable is truthy, simply as
if (open)instead ofif (open == true)if (open)而不是if (open == true)Instead of assigning
trueorfalsein if/else condition, you can directly assign opposite of what it is not currently.true或false，您可以直接分配当前不是的相反数。 likeopen = !openso if open is false then it will become true and vice-versaopen = !open所以如果 open 是假的，那么它就会变成真，反之亦然
Final Code will be like最终代码会像
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.