使用 Button 更改 margin-left 属性切换 Div

Question

我有一个<div class="lateral-menu"> 和一个按钮

<img class="responsive-icon" src="images/resposive-icon.svg"/>

，div 的宽度为 220px，高度为 auto。

这个想法是在单击 .resposive-icon 时切换横向菜单的 css 属性之一

似乎是我的代码不起作用，有人可以指导我吗？

HTML

<div class="lateral-menu">
<img class="responsive-icon" src="images/resposive-icon.svg"/>

CSS

.lateral-menu {
height: auto;
background-color: #262525;
overflow: hidden;
position: absolute;
top: 50px;
width: 220px;
margin-left:-220px;
}

JAVASCRIPT

$('.responsive-icon').click(function () {
$(".lateral-menu").animate({
    marginLeft: '0px'
}, 500);
});

我正在尝试将 margin-left 从 -220px 切换为 0 以使其从左侧出现。一些建议？谢谢！

Answer 1

您粘贴的代码示例存在一些问题，导致它在不进行一些更改的情况下无法工作，但总体而言，该方法没有任何问题。

如果 HTML 是这样的：

<div class="lateral-menu"></div>
<img class="responsive-icon" src="images/resposive-icon.svg"/>

那么你需要对这个例子应用一个高度，如Lai's 2nd jsfiddle。

如果 HTML 是这样的：

<div class="lateral-menu">
  <img class="responsive-icon" src="images/resposive-icon.svg"/>
</div>

假设您在页面上加载了 jQuery，它应该可以正常工作。我建议打开browser console to check for errors or warnings。

此外，您可能会发现使用 left 的运气更好，因为它的绝对位置如下例所示：https://jsfiddle.net/okohrvoL/1/

编辑：

要让菜单再次折叠，可以在回调函数中添加一个简单的检查：

$('.responsive-icon').click(function () {
  var targetValue;

  if ($('.lateral-menu').css('left') == "0px") {
    targetValue = '-220px';
  } else {
    targetValue = '0px';
  }

  $(".lateral-menu").animate({
    left: targetValue
  }, 500);
});

此处的工作示例：https://jsfiddle.net/okohrvoL/2/