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

我创建了一个div，我只希望看到按钮被按下时，我将div的边距设置为-600，然后当按下按钮时，它将div移动到margin: 0。我怎样才能让一个按钮点击移动一个div？

这里是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; 
}

任何人都可以解释为什么这是行不通的？谢谢！

来源

2017-06-07 Musty

什么ü在控制台中看到？ – tech2017

即时通讯使用一个名为codepen的网站，它没有任何控制台不幸的 – Musty

@Musty Codepen有一个控制台就像任何其他网站。按F12。 – Santi

您正在使用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>

来源

2017-06-07 17:14:57

感谢您的帮助，这工作。有没有办法让它慢慢滑入，而不是立即出现？ – Musty

@Musty啊，这很好，谢谢。你只需要将'transition'应用于你正在改变的任何属性。更新了我的答案。虽然从技术上讲，使用transition或animation最好的方法是改变transform，在这种情况下，你可能想要转换'transform：translateX（）'。所以我会用它来代码重构你的代码https://codepen.io/mcoker/pen/pwjyzN –

使用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>

来源

2017-06-07 17:16:25 Johannes

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

回答

相关问题