Question

我在我的html代码中设置了一边。我已经创建了一个允许我更改宽度的javascript，当我再次单击旁边减小宽度时。但是，当我撇开两次，那么什么都不会发生。这是行不通的。请找到解决此问题的方法。我希望通过首先单击宽度更改旁边，然后第二次单击减小宽度。

FIDDLE

这是我的剧本：

<aside id="aside">
  <div id="click">
    <li>
    </li>
  </div>
</aside>

JS：

var next = document.getElementById('click');
next.addEventListener('click', function() {
  if (document.getElementById('aside').style.width = "35px"){
    document.getElementById('aside').style.width = "55%";
    document.getElementById('click').style.height = "calc(100% - px)";
    document.getElementById('click').style.marginTop = "-1px";
    document.getElementById('click').style.paddingLeft = "7px";
    document.getElementById('click').style.cssFloat = "right";
    document.getElementById('aside').style.WebkitTransition = 'width 1s';
    document.getElementById('aside').style.MozTransition = 'width 1s';
    document.getElementById('image').style.marginLeft = "-5px";
    var img = document.getElementById("image");
    img.setAttribute("class", "rotated-image");
  }
}, false);

window.addEventListener('click', function() {
  if (document.getElementById('aside').style.width == "55%"){
    document.getElementById('aside').style.width = "35px";
  }
});

抱歉我的英文。

Answer 1

if (document.getElementById('aside').style.width = "55%"){

应该是

if (document.getElementById('aside').style.width == "55%"){

注意要比较的两个等号，而不是分配。

Answer 2

问题是当你第一次点击元素时，这个调用next.addEventListener('click', function() {并且当这个函数完成时，下一个函数也被调用window.addEventListener('click', function() {所以...它返回到原始大小< / p>

Answer 3

我没有你可爱的帮助就解决了我的问题：

解决方案：

<强> FIDDLE

感谢您的帮助*讽刺

Javascript删除onclick

3 个答案: