Javascript 如何在单击移动div时制作按钮？

我创建了一个div，我只想在按下按钮时看到它。我将div的边距定位为

-600

，然后按下按钮时，它将div移动到

边距：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>

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

---

有人能解释为什么这不起作用吗？谢谢

您正在使用

左边距

将元素移出屏幕，然后在JS中更改

左边距

。你需要使用其中一个

功能切换菜单（）{
if（document.getElementById（“mobile”）.style.left==“0px”）
{document.getElementById（“移动”）.style.left=“-630px”
}
否则{
document.getElementById（“移动”）.style.left=“0px”
}
}

#移动{
保证金：0；
边际上限：0px；
宽度：250px；
高度：1000px；
背景色：#333333；
左：-600px；
位置：绝对位置；
z指数：-5；
过渡：左。5s；
}
.滑块{
边界：无；
背景色：白色；
高度：3倍；
宽度：45px；
边缘顶部：10px；
边界半径：15px；
}
#滑动按钮{
边界：0；
边缘顶部：12px；
左边距：15px；
右侧填充：7px；
填充顶部：7px；
位置：固定；
边界半径：5px；
左侧填充：18px；
}
#滑动按钮：焦点{
大纲：无；
}
#滑动按钮：悬停{
背景色：rgba（100100,0.1）；
过渡：缓解0.6s；
}
#移动电话{
边缘顶部：100px；
}
.小名单{
显示：块；
填充顶部：15px；
垫底：15px；
左侧填充：0px；
字体大小：45px；
}

家


画廊


订单


竞技场


联系我们


asdf

您正在使用

左边距

将元素移出屏幕，然后在JS中更改

左边距

。你需要使用其中一个

功能切换菜单（）{
if（document.getElementById（“mobile”）.style.left==“0px”）
{document.getElementById（“移动”）.style.left=“-630px”
}
否则{
document.getElementById（“移动”）.style.left=“0px”
}
}

#移动{
保证金：0；
边际上限：0px；
宽度：250px；
高度：1000px；
背景色：#333333；
左：-600px；
位置：绝对位置；
z指数：-5；
过渡：左。5s；
}
.滑块{
边界：无；
背景色：白色；
高度：3倍；
宽度：45px；
边缘顶部：10px；
边界半径：15px；
}
#滑动按钮{
边界：0；
边缘顶部：12px；
左边距：15px；
右侧填充：7px；
填充顶部：7px；
位置：固定；
边界半径：5px；
左侧填充：18px；
}
#滑动按钮：焦点{
大纲：无；
}
#滑动按钮：悬停{
背景色：rgba（100100,0.1）；
过渡：缓解0.6s；
}
#移动电话{
边缘顶部：100px；
}
.小名单{
显示：块；
填充顶部：15px；
垫底：15px；
左侧填充：0px；
字体大小：45px；
}

家


画廊


订单


竞技场


联系我们


asdf

在脚本中使用

marginLeft

而不是

left

：

功能切换菜单（）{
if（document.getElementById（“mobile”）.style.marginLeft==“0px”）{
document.getElementById（“移动”）.style.marginLeft=“-630px”
}否则{
document.getElementById（“移动”）.style.marginLeft=“0px”
}
}

#移动{
保证金：0；
边际上限：0px；
宽度：250px；
高度：1000px；
背景色：#333333；
左边距：-600px；
位置：绝对位置；
z指数：-5；
}
.滑块{
边界：无；
背景色：白色；
高度：3倍；
宽度：45px；
边缘顶部：10px；
边界半径：15px；
}
#滑动按钮{
边缘顶部：12px；
左边距：15px；
右侧填充：7px；
填充顶部：7px；
位置：固定；
边界半径：5px；
左侧填充：18px；
}
#滑动按钮：焦点{
大纲：无；
}
#滑动按钮：悬停{
背景色：rgba（1001001000.1）；
过渡：缓解0.6s；
}
#移动电话{
边缘顶部：100px；
}
.小名单{
显示：块；
填充顶部：15px；
垫底：15px；
左侧填充：0px；
字体大小：45px；
}

家


画廊


订单


竞技场


联系我们

在脚本中使用

marginLeft

而不是

left

：

功能切换菜单（）{
if（document.getElementById（“mobile”）.style.marginLeft==“0px”）{
document.getElementById（“移动”）.style.marginLeft=“-630px”
}否则{
document.getElementById（“移动”）.style.marginLeft=“0px”
}
}

#移动{
保证金：0；
边际上限：0px；
宽度：250px；
高度：1000px；
背景色：#333333；
左边距：-600px；
位置：绝对位置；
z指数：-5；
}
.滑块{
边界：无；
背景色：白色；
高度：3倍；
宽度：45px；
边缘顶部：10px；
边界半径：15px；
}
#滑动按钮{
边缘顶部：12px；
左边距：15px；
右侧填充：7px；
填充顶部：7px；
位置：固定；
边界半径：5px；
左侧填充：18px；
}
#滑动按钮：焦点{
大纲：无；
}
#滑动按钮：悬停{
背景色：rgba（1001001000.1）；
过境
#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;
}