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>

我不知道哪里出了问题！

预先感谢您：）

Answer 1

在第一次运行时，style.display属性等于一个空字符串。这就是为什么它仅在第二次点击时起作用。

您可以像这样进行第二次比较：

 if (document.getElementById("secondmenu").style.display == "none" || document.getElementById("secondmenu").style.display == "") {
    console.log(document.getElementById("secondmenu").style.display)

或反转条件：...display != "block"

或者您可以设置元素style inline <ul id="secondmenu" class="nobull" style="display: block">

或者您可以使用javascript进行设置：

document.getElementById("secondmenu").style.display = "none"

function hidelinks() {

  if (document.getElementById("secondmenu").style.display == "none" || document.getElementById("secondmenu").style.display == "") {
    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>

Answer 2

默认情况下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>

Answer 3

1）如果您使用javascript更改样式，它将成为内嵌样式。 因此，您需要放置显示内容：无样式内嵌样式，也无需从一开始就使用javascript进行设置。（下面的代码）

2）另一个解决方案是将if条件更改为：

if ( document.getElementById("secondmenu").style.display != "block"){ }

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";
	}
  
  
  }

    <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" style="display: none">
                  <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>

Javascript功能仅在第二次点击时有效

3 个答案: