js为元素绑定不同点击事件时出现问题

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的每一项绑定了两个点击事件

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

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

你在浏览器中，调试一下脚本，看看第二次是什么问题

表示。。强迫症伤不起。

     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);
                                            }
            })();
    }

应该是这样

 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;//移动到标记A试试？
}, false);
//标记A
}
})();
}

绑定过一个事件就好了吧，然后判断下flag设置不同的right值

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