Show/Hide div 函数不工作

Question

我正在为学校制作一个网站，但我遇到了 javascript 的问题。我是 javascript 的新手，所以这可能很简单，请多多包涵。

在 css 中，我已将带有 id navigatie 的元素的显示设置为 "none"。如果我删除 else{} 部分，代码可以工作，但没有。有人知道我做错了什么吗？

这是我的代码：

<!DOCTYPE html>
<!--gemaakt door Timo Vossen D01-->
<html>
    <head>
        <title>Straight Outta Compton</title>
        <link rel="stylesheet" type="text/css" href="sac.css">
        <meta name="keywords" content="Gerecht">
        <meta name="author" content="Timo Vossen">
        <meta name="description" content="Straight Outta Compton fanpage">
        <meta charset="UTF-8">
        <body onload="homeFunction()">
    </head>

    <script type="text/javascript">
        function showhide(){
            var nav = document.getElementById("navigatie");
            if(nav.style.display = "none"){
            nav.style.display = "block";
            }
            else{
            nav.style.display = "none";
            }
        }
    </script>

    <body>
        <div id="navigatie">
            <ul class="navigatiebar">
                <li class="knop"><a href="#">Home</a></li>
                <li class="knop"><a href="#">Movie</a></li>
                <li class="knop"><a href="#">Actors</a></li>
                <li class="knop"><a href="#">N.W.A</a></li>
                <li class="knop"><a href="#">Media</a></li>
            </ul>
        </div>

        <input type="checkbox" id="navigatieknop" onclick="showhide()" class="navigatieknop" />
        <label for="navigatieknop"></label>
        <div class="website">
            <div id="inhoud">
                <div id="beschijving">
                    <h1 class="text">Straight Outta Compton (2015)</h1><br>
                    <p class="text">In the mid-1980s, the streets of Compton, California, were some of the most dangerous in the country. When five young men translated their experiences growing up into brutally honest music that rebelled against abusive authority, they gave an explosive voice to a silenced generation. Following the meteoric rise and fall of N.W.A., Straight Outta Compton tells the astonishing story of how these youngsters revolutionized music and pop culture forever the moment they told the world the truth about life in the hood and ignited a cultural war.</p>
                </div>
                <div id="videos">
                    <iframe width="100%" height="100%" src="https://www.youtube.com/embed/rsbWEF1Sju0" frameborder="0" allowfullscreen></iframe>
                </div>
                <div id="quote">
                    <h1 class="text"><q>If we keep goin' we can take over the goddamn world!</q></h1><br>
                    <p class="text">-Dr. Dre</p>
                </div>
                <div id="producers">
                    <img src="img/universal.png" id="uni"></img>
                    <img src="img/legendary.png" id="leg"></img>
                </div>
                <!--<div id="footer">
                </div>-->
            </div>
        </div>
    </body>
</html>

Answer 1

您只需要改变您的 if 条件如下：

if(nav.style.display = "none"){
...Your Code
}

这应该有效：

if(nav.style.display == "none"){
    ...Your Code
    }

Answer 2

您使用的是相等运算符，而不是比较运算符。使用 == 而不是 =

 var nav = document.getElementById("navigatie");
        if(nav.style.display == "none"){
        nav.style.display = "block";
        }
        else{
        nav.style.display = "none";
        }

这应该有效

Answer 3

你可以试试这个：

 if(nav.style.display == "none"){
  ...Enter Your Code
}

Answer 4

尝试将您的条件更改为以下内容：

if(nav.style.visibility !== 'hidden')

Show/Hide div 函数不工作

Show/Hide div function not working

html

javascript

if-statement

show

hide