javascript - 我怎样才能让一个按钮点击移动一个div？

Question

我创建了一个 div，我只想在按下按钮时看到我将 div 定位为 -600 然后当按下按钮时，它将 div 移动到 margin :0。

这是 div 和按钮的 HTML:

<div id="mobile">
    <hr id="line">
    <ul id="listMobile">
        <li class="smallList"><span style="color:#ffe700">Home</span>
        </li>
        <li class="smallList">
            Gallery
        </li>
        <li class="smallList">
            Order Form
        </li>
        <li class="smallList">
            The Arena
        </li>
        <li class="smallList">
            Contact Us
        </li>
    </ul>

</div>

<button id="slideButton" onClick="toggleMenu();">
    <hr class="slider">
    <hr class="slider">
    <hr class="slider">
</button>

这是 JavaScript(我仍然是 JavaScript 的初学者，所以请放轻松):

function toggleMenu () {
    if (document.getElementById("mobile").style.left == "0px") {
        document.getElementById("mobile").style.left = "-630px";
    } else {
        document.getElementById("mobile").style.left = "0px";
    }
}

这是我的 CSS:

#mobile {
  margin:           0;
  margin-top:       0px;
  width:            250px;
  height:           1000px;
  background-color: #333333;
  margin-left:      -600px;
  position:         absolute;
  z-index:          -5;
}

.slider {
  border: none;
  background-color: white;
  height:           3px;
  width:            45px;
  margin-top:       10px;
  border-radius:    15px;
}

#slideButton {
  background-color: rgba(255, 255, 255, 0);
  border:           0;
  margin-top:       12px;
  margin-left:      15px;
  padding-right:    7px;
  padding-top:      7px;
  position:         fixed;
  border-radius:    5px;
  padding-left:     18px;
  visibility:       hidden;
}

#slideButton:focus {
  outline: none;
}

#slideButton:hover {
  background-color: rgba(100,100,100,0.1);
  transition:       ease 0.6s;
}

#listMobile {
  margin-top: 100px;
}

.smallList {
  display:        block;
  padding-top:    15px;
  padding-bottom: 15px;
  padding-left:   0px;
  font-size:      45px;
}

谁能解释为什么这不起作用？谢谢!

Answer 1

您正在使用 margin-left 将元素移出屏幕，然后在您的 JS 中更改 left。您需要使用其中之一。

function toggleMenu(){

  if(document.getElementById("mobile").style.left == "0px")
 {document.getElementById("mobile").style.left ="-630px"

}
 else{
 document.getElementById("mobile").style.left = "0px"
}
}

#mobile {
 margin: 0;
 margin-top: 0px;
 width: 250px;
 height: 1000px;
 background-color: #333333;
 left: -600px;
 position: absolute;
 z-index: -5;
 transition: left .5s;
}

.slider {
   border: none;
   background-color: white;
   height: 3px;
   width: 45px;
   margin-top: 10px;
   border-radius:15px;
}

#slideButton {
  border: 0;
  margin-top: 12px;
  margin-left: 15px;
  padding-right: 7px;
  padding-top: 7px;
  position: fixed;
  border-radius: 5px;
  padding-left: 18px;
}

#slideButton:focus {
   outline: none;
}

#slideButton:hover {
   background-color: rgba(100,100,100,0.1);
   transition: ease 0.6s;
}

#listMobile {
   margin-top: 100px;
}

.smallList {
   display: block;
   padding-top: 15px;
   padding-bottom: 15px;
   padding-left: 0px;
   font-size: 45px;
}

<div id="mobile">
  <hr id="line">
  <ul id="listMobile">
        <li class="smallList"><span style="color:#ffe700">
           Home</span>
        </li> 
     <li class="smallList">
           Gallery
        </li> 
     <li class="smallList">
           Order Form
        </li> 
     <li class="smallList">
           The Arena
        </li> 
     <li class="smallList">
           Contact Us
        </li> 
  </ul>   

    </div>

      <button id="slideButton" onClick="toggleMenu()">
          asdf
       </button>

或者你也可以继续用margin-left隐藏菜单，然后用left显示出来，但是需要用正值left，而不是负数，并将菜单的初始状态设置为 left: 0px，以便您的条件在第一次点击时起作用。

function toggleMenu() {
  if (document.getElementById("mobile").style.left == "0px") {
    document.getElementById("mobile").style.left = "630px";
  } else {
    document.getElementById("mobile").style.left = "0px";
  }
} 

#mobile {
 margin: 0;
 margin-top: 0px;
 width: 250px;
 height: 1000px;
 background-color: #333333;
 margin-left: -600px;
 position: absolute;
 z-index: -5;
 transition: left .5s;
}

.slider {
   border: none;
   background-color: white;
   height: 3px;
   width: 45px;
   margin-top: 10px;
   border-radius:15px;
}

#slideButton {
  border: 0;
  margin-top: 12px;
  margin-left: 15px;
  padding-right: 7px;
  padding-top: 7px;
  position: fixed;
  border-radius: 5px;
  padding-left: 18px;
}

#slideButton:focus {
   outline: none;
}

#slideButton:hover {
   background-color: rgba(100,100,100,0.1);
   transition: ease 0.6s;
}

#listMobile {
   margin-top: 100px;
}

.smallList {
   display: block;
   padding-top: 15px;
   padding-bottom: 15px;
   padding-left: 0px;
   font-size: 45px;
}

<div id="mobile" style="left:0px">
  <hr id="line">
  <ul id="listMobile">
        <li class="smallList"><span style="color:#ffe700">
           Home</span>
        </li> 
     <li class="smallList"> 
           Gallery
        </li> 
     <li class="smallList">
           Order Form
        </li> 
     <li class="smallList">
           The Arena
        </li> 
     <li class="smallList">
           Contact Us
        </li> 
  </ul>   

    </div>

      <button id="slideButton" onClick="toggleMenu()">
          asdf
       </button>