切换一个div按钮改变利润率左属性

我有一个<div class="lateral-menu">和一个按钮切换一个div按钮改变利润率左属性

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

，股利是220px宽和经销商的高度。

的想法是切换横向菜单的CSS属性之一，而点击.resposive图标

似乎是我的代码不能正常工作，有人可以定位我吗？

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以允许它从出现左边。一些建议？谢谢！

来源

2016-03-22 Eugenio

似乎完美的工作..看[小提琴]（https://jsfiddle.net/ey96a40y/）...在您的浏览器控制台中的任何错误？ – Lal

看看这个例子，它可能会帮助你：http://jsfiddle.net/07dmh3gL/2/ – Lotus91

或是[this]（https://jsfiddle.net/ey96a40y/1/）你正在尝试实现？ – Lal

您粘贴的代码示例有几个问题会导致它在没有一些更改的情况下无法正常工作，但总体而言，此方法没有任何问题。

如果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/

来源

2016-03-22 16:59:49

谢谢！该部分正在工作，我想要做的是，当我再次单击相同的按钮时，将其恢复到原始位置。到目前为止，我只能显示横向菜单 – Eugenio

我已通过一种简单的方法更新了答案，以便在下次点击时关闭菜单。 –

真棒@JeremyBaker现在我明白它是如何工作的！谢谢朋友！ – Eugenio

切换一个div按钮改变利润率左属性

回答

相关问题