Question

我创建了一个div，我只想在按下按钮时看到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>

Answer 2

在脚本中使用marginLeft代替left：

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

#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 {
  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()">
          <hr class="slider">
          <hr class="slider">
          <hr class="slider">
       </button>

如何点击按钮移动div？

2 个答案: