Question

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

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

，div为220px宽，自动为高度。

想法是在点击.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);
});

我试图将边距从-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/

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

1 个答案: