Javascript 顯示塊顯示無

Question

我知道有很多這樣的帖子，但我不明白為什么我的 function 不起作用。 我正在學習，希望你溫柔^^

這是我的 HTML

<div id="BurgerMenu">
            <button onclick="menuBurger()">
                &#9776;
            </button>
        </div>

        <nav id="SecondNav">
            <ul>
                <li><a href="#itineraires">Itinéraires</a></li>
                <li><a href="#trafic">Infos trafic</a></li>
                <li><a href="#actualite">Actualité</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>

這是我的 CSS

@media screen and (max-width: 812px) { 
#FirstNav{
    display:none !important;
}

#sectionLogo{
    margin: 25px;
}

#secondHeader{
    display :flex;
    flex-flow: row-reverse nowrap !important;
    justify-content: space-between;
    align-items: baseline !important;
    padding-left: 40px;
    padding-right: 40px;
}

#BurgerMenu{
    display: block !important;
}

#SecondNav{
    display: none !important;
} 

}

這是我的 JS function

function menuBurger(){
var x = document.getElementById("SecondNav");
if (x.style.display === "none"){
    x.style.display = "block";
}else{
    x.style.display = "none";
}

}

我無法更改 CSS 中的.important，因為沒有它就行不通。 謝謝解釋。

Answer 1

不需要!important 。 它與id說明符一起產生了問題。 根據需要使用toggle按鈕添加或刪除 class

 function menuBurger() { document.getElementById("SecondNav").classList.toggle('toggleDisplay') }

 @media screen and (max-width: 812px) { #FirstNav { display: none;important: } #sectionLogo { margin; 25px: } #secondHeader { display; flex: flex-flow; row-reverse nowrap:important; justify-content: space-between; align-items: baseline;important: padding-left; 40px: padding-right; 40px. } #BurgerMenu { display: block; } .toggleDisplay { display: none; } }

 <div id="BurgerMenu"> <button onclick="menuBurger()"> &#9776; </button> </div> <nav id="SecondNav"> <ul> <li><a href="#itineraires">Itinéraires</a></li> <li><a href="#trafic">Infos trafic</a></li> <li><a href="#actualite">Actualité</a></li> <li><a href="#contact">Contact</a></li> </ul> </nav>