圆形css菜单表现得很奇怪

Question

我有一个圆形菜单。我在这个网站上找到了它：http://tympanus.net/codrops/2013/08/09/building-a-circular-navigation-with-css-transforms/

但它表现得非常奇怪。我不能多次按下同一个按钮。似乎当我按下按钮一次时我再也不能按它了。任何人都可以看到问题所在吗？

https://jsfiddle.net/bewsbews/jznqeh5o/1/

它可能需要对此js代码执行某些操作：

     (function () {

    var button = document.getElementById('cn-button'),
        wrapper = document.getElementById('cn-wrapper'),
        overlay = document.getElementById('cn-overlay');

    //open and close menu when the button is clicked
    var open = false;
    button.addEventListener('click', handler, false);
    button.addEventListener('focus', handler, false);
    wrapper.addEventListener('click', cnhandle, false);

    function cnhandle(e) {
        e.stopPropagation();
    }

    function handler(e) {
        if (!e) var e = window.event;
        e.stopPropagation();//so that it doesn't trigger click event on document

        if (!open) {
            openNav();
        }
        else {
            closeNav();
        }
    }
    function openNav() {
        open = true;
        button.innerHTML = "-";
        classie.add(overlay, 'on-overlay');
        classie.add(wrapper, 'opened-nav');
    }
    function closeNav() {
        open = false;
        button.innerHTML = "+";
        classie.remove(overlay, 'on-overlay');
        classie.remove(wrapper, 'opened-nav');
    }
    document.addEventListener('click', closeNav);

})();