javascript - 在媒体查询的帮助下按下按钮后，无法在导航栏中重新出现隐藏的 div

Question

我正在尝试重现 this responsive Navbar由 W3 学校提供。

到目前为止一切正常，除了我没有让其他 div(用作导航选项)重新显示为垂直列表。

我尝试在按下按钮时更改为第一个 div 的背景颜色(无论如何它应该总是出现)并且它确实有效，这意味着 navigation 的 onClick > div 确实有效。我不明白的是为什么其他 div 不显示？

这是相关的HTML代码

<div id=navbar class="respNavBar">
    <div id="first">
        <a><b>TEST</b></a>
    </div>
    <div class="extra">
        <a><b>TEST</b></a>
    </div>
    <div class="extra">
        <a><b>TEST</b></a>
    </div>
    <div class="extra">
        <a><b>TEST</b></a>
    </div>

    <div class=navigation href="javascript:void(0);" onclick="showRespBar()">
        <a><b>...</b></a>
    </div>

CSS 代码

.greetingsText {
    font-family: Raleway;
    font-size: 50px;
}

.greetings {
    box-shadow: 3px 6px #232323;
    margin-right: 67%;
    min-width: 165px;
}

#navbar {
    height: 55px;
    background-color: #393939;
    box-shadow: 3px 6px #232323;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center; /* this makes shit center align vertically*/
    min-width: 375px;
}

#navbar div:hover {
    background-color: #a4a4a4;
}

.navigation {
    display: none;

}

#navbar div {
    height: 100%;
}

a {
    margin-top: 10px;
    display: block;
    font-family: Raleway;
    font-size: 30px;
    text-align: center; /*this makes shit center horizaontally*/
}


.container {
    margin-left: 12%;
    margin-top: 2%;
    margin-right: 12%;
}

@media screen and (max-width: 750px) {
    #navbar {
        display: block;
    }

    #navbar div:not(#first):not(.navigation)  {display: none;}


    #first {
        float: left;
        display: block;
    }

    .navigation {
        display: block;
        float: right;
    }

}
@media screen and (max-width: 750px){

    .extra {
        float: none;
        display: block;
        text-align: left;
    }

}

JS 代码

function showRespBar() {

    var className = document.getElementById("navbar").className;

    if (className === "respNavBar") {
        document.getElementById("navbar").className += "additional";
    } else {
        document.getElementById("navbar").className = "respNavBar";
    }

    alert(className);

}

Answer 1

我在你的 JS 代码中发现了一个可能的问题，在 if 条件下，

document.getElementById("navbar").className += "additional"; 应该是 document.getElementById("navbar").className += "additional";

您缺少一个空格，因此 respNavBaradditional 类应用到导航栏而不是 respNavBar 添加。