なぜナビゲーションメニューは1回だけクリックできますか？

Question

私は1つのチュートリアルを使用して全画面ナビゲーションメニューを構築しようとしていますが、その最後にナビゲーションメニューが1回だけクリック可能である理由を理解できません。だからあなたはそれを一度クリックしてメニューが表示されているときにそれを閉じることができますが、私は再びそれを開くには、私は再びそれを使用できるようにページを更新する必要がありますか？なぜコードはそれがあるべきであるように動作していないすべてのアイデア？ここで

は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

- に変更します。次のようにあなたは、おそらく最初にあなたのクラスの近くに追加した場合、他の変更を行う必要があります

：

HTMLの変更：

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

Javascriptを変更：

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

JSフィドルworking link

Answer 2

上の例で、あなたのelseステートメントに問題がある - 私はあなたのjsfiddleに変更を加えていた

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