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

【问题标题】：On click on 1st element, change style of second element单击第一个元素时，更改第二个元素的样式
【发布时间】：2019-02-28 20:09:25
【问题描述】：

我发布了我的 CSS、HTML 和 JS（这对我来说是个问题）。我想用JS改变'nav'的CSS，但只能点击'button'。

这就是我写 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()"

【问题讨论】：

getElementsById 不是您要找的那个。试试getElementById
首先，这不存在：getElementsById 它是单数的 getElementById。所以它不起作用是有道理的
尝试查看控制台是否有错误。在铬上ctrl + shift + i

标签： javascript html css flexbox

【解决方案1】：

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

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>

【讨论】：

是的！这行得通！非常简单易懂！
请问，我可以用它在第二次点击时再次显示“display:none”吗？
@jan horuk 是的，如果条件.. 你想让我这样做吗？？
我很高兴，但不想占你便宜！
好吧，这不起作用： if (document.getElementById("nav").style.display = "flex";) { document.getElementById("nav").style.display = “没有任何”; }

【解决方案2】：

您的 javascript 中有一个输入错误，应该是 getElementById。您应该使用addEventListener 监听按钮中的click 事件

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>

【讨论】：