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

悬赏的，上一个帖子还没结
if需要写到addEventListener里面。这上面每个节点只绑定了一个事件，不是2个。