时间戳

首页 > 解决方案 > 借助媒体查询按下按钮后，无法在导航栏中重新显示隐藏的 div

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

问题描述

我正在尝试重现W3 学校提供的这种响应式导航栏。

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

我尝试在按下按钮时更改为第一个 div 的背景颜色（无论如何都应该出现），它确实有效，这意味着onClickdivnavigation确实有效。我不明白为什么其他 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);

}

标签： javascripthtmlcssmedia-queries

解决方案

我在您的 JS 代码中发现的一个可能问题，内部if条件，

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

您缺少一个空格，因为哪个respNavBaradditional类被应用于 navbar 而不是respNavBar addition.

推荐阅读