javascript - Ul/div 没有得到高度

Question

当我按下“菜单按钮”时，我无法显示导航栏。该 div 似乎出现在代码中，但是高度为 0。这是问题的相关代码。您对我如何解决这个问题有什么建议吗？

var onOff = 0;

function dropdown() {
    "use strict";
    var navbar = document.getElementById("nav_ul");
    var ulDiv = document.getElementById("ulDiv");
    if (onOff === 0) {
        navbar.setAttribute("class", "navShow");
        ulDiv.setAttribute("class", "navShow");
        onOff = 1;
    } else if (onOff === 1) {
        navbar.setAttribute("class", "navHide");
        ulDiv.setAttribute("class", "navHide");
        onOff = 0;
    }
}

#ulDiv{
    text-align: center;
    float: none;
}

ul{
    position: relative;
    bottom: 0;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 20px;
}
li {
    display: inline;
    padding-top: 0;
    margin-top: 0;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 5px;
}
.navHide{
    display: none;
}
.navShow{
    display: block;
    height:auto;
}
@media screen and (max-width: 1005px) {
    #ulDiv{
        height: auto;
    }
    
    #nav_ul{
        display: none;
        width: 100px;
        z-index: 3;
        position: absolute;
        top: 106px;
        left: 0px;
        margin: 0px;
        padding-bottom: 20px;
    }
    li{
        display: inline-block;
    }
}

<header>
        <nav id="navbar" class="navbar">
        <a href="home.html" id="logoA"><img id="logo" alt="logo" src="logo_dk.jpg"></a>
        <button id="menu-but" onclick="dropdown()"><img id="meny-icon" alt="meny icon" src="menu-icon.png"></button>
        <div id="ulDiv"><ul id="nav_ul" class="none">
        <li><a href="home.html">Forside</a></li>
        <li><a href="#">Advokater</a></li>
        <li><a href="#">Sagsområder</a></li>
        <li><a href="#">Internationalt</a></li>
        <li><a href="#">Oplysninger</a></li>
        <li><a href="#">Karriere</a></li>
        <li><a href="#">Historie</a></li>
        <li><a href="#">Kontakt</a></li>
        </ul>
        </div>
        </nav>
    </header>

Answer 1

  var onOff = 0;

window.dropdown = function() {
    "use strict";
    var navbar = document.getElementById("nav_ul");
    var ulDiv = document.getElementById("ulDiv");
    if (onOff === 0) {
        navbar.setAttribute("class", "navShow");
        ulDiv.setAttribute("class", "navShow");
        onOff = 1;
    } else if (onOff === 1) {
        navbar.setAttribute("class", "navHide");
        ulDiv.setAttribute("class", "navHide");
        onOff = 0;
    }
}

#ulDiv{
    text-align: center;
    float: none;
    display: none;
}

ul{
    position: relative;
    bottom: 0;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 20px;
}
li {
    display: inline;
    padding-top: 0;
    margin-top: 0;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 5px;
}
header .navHide{
    display: none;
}
header .navShow{
    display: block !important;
    height:auto;
}
@media screen and (max-width: 1005px) {
    #ulDiv{
        height: auto;
    }

    #nav_ul{
     
        width: 100px;
        z-index: 3;
        position: absolute;
        top: 106px;
        left: 0px;
        margin: 0px;
        padding-bottom: 20px;
    }
    li{
        display: inline-block;
    }
}

<header>
        <nav id="navbar" class="navbar">
        <a href="home.html" id="logoA"><img id="logo" alt="logo" src="logo_dk.jpg"></a>
        <button id="menu-but" onclick="window.dropdown()"><img id="meny-icon" alt="meny icon" src="menu-icon.png"></button>
        <div id="ulDiv"><ul id="nav_ul" class="none">
        <li><a href="home.html">Forside</a></li>
        <li><a href="#">Advokater</a></li>
        <li><a href="#">Sagsområder</a></li>
        <li><a href="#">Internationalt</a></li>
        <li><a href="#">Oplysninger</a></li>
        <li><a href="#">Karriere</a></li>
        <li><a href="#">Historie</a></li>
        <li><a href="#">Kontakt</a></li>
        </ul>
        </div>
        </nav>
    </header>
    
    <script>
  
    </script>