有关js为元素绑定两个点击事件的问题

Question

var sideRight = document.getElementById('sideright');
var side = document.getElementsByClassName('side-icon');
var flag = true;
for (var i = 0; i < side.length; i++) {
(function() {
if (flag) {
side[i].addEventListener('click', function() {
changeManyElem(sideRight, {
'right': 0
}, 30);
}, false);
flag = false;
} else {
side[i].addEventListener('click', function() {
changeManyElem(sideRight, {
'right': -350
}, 30);
flag = true;
}, false);
}
})();
}

这里我side的每一项绑定了两个点击事件

效果就是点击每一项右边栏会划出，再点击一下会滑回去。

可是代码敲完之后发现点击第一项的时候会划出，再点击第一项的时候没反应，这时候点击第二项时会滑回去。
求高手指点迷津！！

Answer 1

想实现你所说的方法，你可以这样:for (var i = 0; i < side.length; i++) {    side[i].addEventListener('click', function() {            if(flag){                 changeManyElem(sideRight, {'right': 0}, 30);              }            else{                 changeManyElem(sideRight, {'right': -350}, 30);            }     }, false);}

Answer 2

你写的那个判断语句，if~else，在一次循环里，if~else只可能执行其中一项，意味着第一次循环if就给第一个side添加划出事件，第二次循环else就给第二个side添加一个划回事件。