Question

我发布了CSS，HTML和JS（这对我来说是个问题）。我想用JS更改“ nav”的CSS，但只能单击“按钮”。

这就是为什么我照原样编写JS的原因，但这可能是错误的，因为它什么都不做。

我只显示宽度小于700px的按钮，那是我希望用户单击该按钮以打开全屏导航的功能，该导航先前是嵌入式的

document.getElementById("button").onclick = function() {
        document.getElementById("nav").style.display = "block";
    }

#button {
  display:none;
}
nav {
  position: sticky;
  width: 100%;
  background-color: blueviolet;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media screen and (max-width:700px){
  #button{
    display: block;
    font-size: 8vmax;
    color: #fff;
    margin-right: 5%;
  }
  nav {
    position: absolute;
    left:0px;
    top: 0px;
    width:100%;
    height:100%;
    display: flex;
    flex-direction:column;
    justify-content: space-evenly;
    display:none;
  }

<button id="button">☰</button> 
  <nav id="nav">
    <div class="nav-text"><a href="#">DOMOV</a></div>
    <div class="nav-text"><a href="#">DOMOV</a></div>
    <div class="nav-text"><a href="#">DOMOV</a></div>
    <div class="nav-text"><a href="#">DOMOV</a></div>
    <div class="nav-text"><a href="#">DOMOV</a></div>
  </nav>

编辑＃1：更改了“ document.getElementsById（“ button”）。onclick = function（）“ 到“ document.getElementById（” button“）。onclick = function（）”

Answer 1

您的javascript输入错误，应该为getElementById。并且您应该使用click

监听按钮中的addEventListener事件

document.getElementById("button").addEventListener('click',function() {
    document.getElementById("nav").style.display = "block";
});

#button{
    display:none;
}   

nav{
    position: sticky;
    width: 100%;
    background-color: blueviolet;
    display: flex;
    justify-content: center;
    align-items: center;
}
@media screen and (max-width:700px){
    #button{
        display: block;
        font-size: 8vmax;
        color: #fff;
        margin-right: 5%;
    }
    nav{
        position: absolute;
        left:0px;
        top: 0px;
        width:100%;
        height:100%;
        display: flex;
        flex-direction:column;
        justify-content: space-evenly;
        display:none;
    }

<button id="button">
         ☰
    </button> 
    <nav id="nav">
        <div class="nav-text"><a href="#">DOMOV</a></div>
        <div class="nav-text"><a href="#">DOMOV</a></div>
        <div class="nav-text"><a href="#">DOMOV</a></div>
        <div class="nav-text"><a href="#">DOMOV</a></div>
        <div class="nav-text"><a href="#">DOMOV</a></div>
    </nav>

Answer 2

希望这对您有所帮助。谢谢

function myFunction() {
  var nav = document.getElementById("nav");
  nav.classList.toggle("mystyle");
}

#button{
    display:none;
}   

nav{
    position: sticky;
    width: 100%;
    background-color: blueviolet;
    display: flex;
    justify-content: center;
    align-items: center;
}
@media screen and (max-width:1000px){
    #button{
        display: block;
        font-size: 8vmax;
        color: #fff;
        margin-right: 5%;
    }
    nav{
        position: absolute;
        left:0px;
        top: 100px;
        width:100%;
        height:100%;
        display: flex;
        flex-direction:column;
        justify-content: space-evenly;
        display:none;
    }
    .mystyle{
    display:flex;}
    }

<button id="button" onclick="myFunction()">
         ☰
    </button> 
    <nav id="nav">
        <div class="nav-text"><a href="#">DOMOV</a></div>
        <div class="nav-text"><a href="#">DOMOV</a></div>
        <div class="nav-text"><a href="#">DOMOV</a></div>
        <div class="nav-text"><a href="#">DOMOV</a></div>
        <div class="nav-text"><a href="#">DOMOV</a></div>
    </nav>

单击第一个元素时，更改第二个元素的样式

2 个答案: