为什么导航菜单只能单击一次？

Question

I am trying to build a full screen navigation menu using one tutorial but at the end of it I can not understand why my navigation menu is clickable only once. So you click on it one time and the menu is showing then you are able to close it but if I want to open it again I have to refresh the page to be able to use it again ? Any ideas why the code is not working as it should be ?

Here is example on JSFIDDLE

    <!-- Navigation Menu -->
              <p><button id="trigger-overlay" type="button">menu</button></p>
             <div class="overlay overlay-slidedown">
              <button type="button" class="overlay-close"></button>
              <nav>
                <ul>
                  <li><a href="#">Home</a></li>
                  <li><a href="#">About us</a></li>
                  <li><a href="#">Categories</a></li>
                  <li><a href="#">Gallery</a></li>
                  <li><a href="#">Events</a></li>
                  <li><a href="#">Blog</a></li>
                  <li><a href="#">Contact us</a></li>
                </ul>
              </nav>
            </div>

    /* Overlay closing cross */
    .overlay .overlay-close {
        width: 80px;
        height: 80px;
        position: absolute;
        right: 20px;
        top: 20px;
        overflow: hidden;
        border: none;
        background: url(../img/cross.png) no-repeat center center;
        text-indent: 200%;
        color: transparent;
        outline: none;
        z-index: 100;
    }

    /* Menu style */

    .overlay nav {
        text-align: center;
        position: relative;
        top: 50%;
        height: 60%;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        letter-spacing: 10px;
    }

    .overlay ul {
        text-transform: uppercase;
        list-style: none;
        padding: 0;
        margin: 0 auto;
        display: inline-block;
        height: 50%;
        position: relative;
    }

    .overlay ul li {
        display: block;
        height: 30%;
        height: calc(100% / 5);
        min-height: 54px;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }

    .overlay ul li a {
        font-size: 3rem;
        font-weight: 300;
        display: block;
        color: #626264;
        -webkit-transition: color 0.2s;
        transition: color 0.2s;
        margin-top: -30px;
        float: left;
        font-weight: 700;
    }

    .overlay ul li a:hover,
    .overlay ul li a:focus {
        color: #FFF;
        text-decoration: underline;
    }

    /* Effects */
    .overlay-slidedown {
        visibility: hidden;
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%);
        -webkit-transition: -webkit-transform 0.4s ease-in-out, visibility 0s 0.4s;
        transition: transform 0.4s ease-in-out, visibility 0s 0.4s;
    }

    .overlay-slidedown.open {
        visibility: visible;
        -webkit-transform: translateY(0%);
        transform: translateY(0%);
        -webkit-transition: -webkit-transform 0.4s ease-in-out;
        transition: transform 0.4s ease-in-out;
    }

    #trigger-overlay{
        margin-top: 50px;
        padding: 5px 0 5px 0;
        float: right;
        color: #FFF;
        text-transform: uppercase;
        border-top: 2px solid #FFF;
        border-bottom: 2px solid #FFF;
    }

    @media screen and (max-height: 30.5em) {
        .overlay nav {
            height: 70%;
            font-size: 34px;
        }
        .overlay ul li {
            min-height: 34px;
        }
    }


function shuffle(array) {
    var currentIndex = array.length
    , temporaryValue
    , randomIndex
    ;

    // While there remain elements to shuffle...
    while (0 !== currentIndex) {
        // Pick a remaining element...
        randomIndex = Math.floor(Math.random() * currentIndex);
        currentIndex -= 1;
        // And swap it with the current element.
        temporaryValue = array[currentIndex];
        array[currentIndex] = array[randomIndex];
        array[randomIndex] = temporaryValue;
    }
    return array;
}

var triggerBttn = document.getElementById( 'trigger-overlay' ),
    overlay = document.querySelector( 'div.overlay' ),
    closeBttn = overlay.querySelector( 'button.overlay-close' ),
    paths = [].slice.call( overlay.querySelectorAll( 'svg > path' ) ),
    pathsTotal = paths.length;

function toggleOverlay() {
    var cnt = 0;

    shuffle( paths );

    if( classie.has( overlay, 'open' ) ) {
        classie.remove( overlay, 'open' );
        classie.add( overlay, 'close' );

        paths.forEach( function( p, i ) {
            setTimeout( function() {
                ++cnt;
                p.style.display = 'none';
                if( cnt === pathsTotal ) {
                    classie.remove( overlay, 'close' );
                }
            }, i * 30 );
        });
    }
    else if( !classie.has( overlay, 'close' ) ) {
        classie.add( overlay, 'open' );
        paths.forEach( function( p, i ) {
            setTimeout( function() {
                p.style.display = 'block';
            }, i * 30 );
        });
    }
}


triggerBttn.addEventListener( 'click', toggleOverlay );
closeBttn.addEventListener( 'click', toggleOverlay );

Answer 1

you have a problem in your else statement - change it to -

else {
    if (classie.has(overlay, 'close')) {
        classie.remove( overlay, 'close' );
    }
    classie.add( overlay, 'open' );
    ... continue of the else statement
}

Answer 2

I had made changes to your jsfiddle.

You should probably add close to your class initially and make changes in else if as following:

HTML change:

<div class="overlay overlay-slidedown close">

Javascript Change:

else if( classie.has( overlay, 'close' ) ) {
            classie.add( overlay, 'open' );
            paths.forEach( function( p, i ) {
                setTimeout( function() {
                    p.style.display = 'block';
                }, i * 30 );
            });
        }

JS Fiddle working link