javascript - Javascript函数仅在第二次点击时起作用

Question

所以我试图在使用 Javascript 的手机上的导航叠加层中隐藏/显示元素。我让它在第二次单击时显示元素，然后每次单击时都会起作用。但它在第一次点击时不起作用，我似乎无法理解为什么。

这是我的代码：

function hidelinks() {

  if ( document.getElementById("secondmenu").style.display =="none"){
    console.log(document.getElementById("secondmenu").style.display)
    console.log("hej")
    document.getElementById("secondmenu").style.display ="block";
  } else {
    console.log(document.getElementById("secondmenu").style.display)
    console.log("hej2")
    document.getElementById("secondmenu").style.display ="none";
  }


}

#secondmenu {
display: none;
}

        <div  id="myTopnav" class="overlay" >
            <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
            
            <div class="overlay-content ">
              <ul class="nobull">
                <li><a onclick="hidelinks()"  href="#">Om madskoler</a></li>
                  <ul id="secondmenu" class="nobull">
                      <li><a id="secondlink" href="#">Madskoler kort fortalt</a></li>
                        <ul class="nobull">
                            <li><a id="thirdlink"  href="#">Arrangører</a></li>
                            <li><a id="thirdlink"  href="#">Samarbejde med ældresagen</a></li>
                        </ul>
                        <li><a id="secondlink"  href="#">Hvad er Madskoler?</a></li>
                        <li><a id="secondlink"  href="#">Etniske Madskoler</a></li>
                        <li><a id="secondlink"  href="#">Ungdomsmadskoler</a></li>
                        <li><a id="secondlink"  href="#">Praktiske oplysninger</a></li>
                        <li><a id="secondlink"  href="#">Maden på Madskoler</a></li>
                        <li><a id="secondlink"  href="#">Salgs- og leveringsbetingelser</a></li>
                  </ul>
                <li><a  href="#">Tilmeld dit barn</a></li>
                <li><a  href="#">Bliv instruktør</a></li>
                <li><a  href="#">Sponsorer og ambassadører</a></li>
                <li><a  href="#">Nyheder</a></li>
                <li><a  href="#">Kontakt</a></li>
                <li><a href="#" class="logout-button">Instruktør login</a></li>
          </ul>

        </div>
    </div>

我不知道哪里出错了！

先感谢您 ：）

标签： javascripthtmlcss

Answer 1

默认情况下document.getElementById("secondmenu").style.display返回空字符串......所以只需更改'if'就可以了......

function hidelinks() {

  if ( document.getElementById("secondmenu").style.display != "block"){
    console.log(document.getElementById("secondmenu").style.display)
    console.log("hej")
    document.getElementById("secondmenu").style.display ="block";
  } else {
    console.log(document.getElementById("secondmenu").style.display)
    console.log("hej2")
    document.getElementById("secondmenu").style.display = "none";
  }


}

#secondmenu {
display: none;
}

        <div  id="myTopnav" class="overlay" >
            <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
            
            <div class="overlay-content ">
              <ul class="nobull">
                <li><a onclick="hidelinks()"  href="#">Om madskoler</a></li>
                  <ul id="secondmenu" class="nobull">
                      <li><a id="secondlink" href="#">Madskoler kort fortalt</a></li>
                        <ul class="nobull">
                            <li><a id="thirdlink"  href="#">Arrangører</a></li>
                            <li><a id="thirdlink"  href="#">Samarbejde med ældresagen</a></li>
                        </ul>
                        <li><a id="secondlink"  href="#">Hvad er Madskoler?</a></li>
                        <li><a id="secondlink"  href="#">Etniske Madskoler</a></li>
                        <li><a id="secondlink"  href="#">Ungdomsmadskoler</a></li>
                        <li><a id="secondlink"  href="#">Praktiske oplysninger</a></li>
                        <li><a id="secondlink"  href="#">Maden på Madskoler</a></li>
                        <li><a id="secondlink"  href="#">Salgs- og leveringsbetingelser</a></li>
                  </ul>
                <li><a  href="#">Tilmeld dit barn</a></li>
                <li><a  href="#">Bliv instruktør</a></li>
                <li><a  href="#">Sponsorer og ambassadører</a></li>
                <li><a  href="#">Nyheder</a></li>
                <li><a  href="#">Kontakt</a></li>
                <li><a href="#" class="logout-button">Instruktør login</a></li>
          </ul>

        </div>
    </div>