切换一个Div与按钮改变左边距属性

Toggle a Div with Button changing margin-left property

本文关键字：按钮 改变 左边 属性 Div 一个      更新时间：2023-09-26

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

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

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

这个想法是在点击.resposive图标的同时切换横向菜单的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);
});

我试图将左边的边距从-220px切换到0，以允许它从左边出现。有什么建议吗？谢谢

粘贴的代码示例存在一些问题，导致它在没有一些更改的情况下无法工作，但总的来说，这种方法没有任何问题。

如果HTML是这样的：

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

然后你需要对这个例子应用一个高度，就像赖的第二个jsfiddle一样。

如果HTML是这样的：

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

然后，假设您已经在页面上加载了jQuery，它应该可以正常工作。我建议打开浏览器控制台来检查错误或警告。

此外，使用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/

相关文章：