JS - 同じページにリンクをクリックしたときにページをリロードするにはどのように？

Question

私はすぐに携帯ナビゲーション用のプラグインを使用を適用するが、私は問題を見つけます。ウェブサイトは1ページのサイトであり、ナビゲーションのリンクはハッシュタグを使用して同じページ内の異なるセクションにダイレクトするためです。

ハンバーガーをクリックしてリンクの1つを選択すると、セクションに移動しますが、ナビゲーションはまだ表示されます。その間、私はページをリロードし、各リンクをクリックした後にセクションに行く必要があります。または、リンクがクリックされたときにナビゲーションが終了する可能性があります。

申し訳ありませんがJavaScriptを理解していない、コードを変更する方法を教えてください、事前に感謝！

(function() { 
 
    
 
    var Menu = (function() { 
 
    var burger = document.querySelector('.burger'); 
 
    var menu = document.querySelector('.menu'); 
 
    var menuList = document.querySelector('.menu__list'); 
 
    var menuItems = document.querySelectorAll('.menu__item'); 
 
    
 
    var active = false; 
 
    
 
    var toggleMenu = function() { 
 
     if (!active) { 
 
     menu.classList.add('menu--active'); 
 
     menuList.classList.add('menu__list--active'); 
 
     burger.classList.add('burger--close'); 
 
     for (var i = 0, ii = menuItems.length; i < ii; i++) { 
 
      menuItems[i].classList.add('menu__item--active'); 
 
     } 
 
     
 
     active = true; 
 
     } else { 
 
     menu.classList.remove('menu--active'); 
 
     menuList.classList.remove('menu__list--active'); 
 
     burger.classList.remove('burger--close'); 
 
     for (var i = 0, ii = menuItems.length; i < ii; i++) { 
 
      menuItems[i].classList.remove('menu__item--active'); 
 
     } 
 
     
 
     active = false; 
 
     } 
 
    }; 
 
    
 
    var bindActions = function() { 
 
     burger.addEventListener('click', toggleMenu, false); 
 
    }; 
 
    
 
    var init = function() { 
 
     bindActions(); 
 
    }; 
 
    
 
    return { 
 
     init: init 
 
    }; 
 
    
 
    }()); 
 
    
 
    Menu.init(); 
 
    
 
}());

.mobile_menu{display:block;} 
 
.burger {position: absolute;z-index: 15;right: 25px;top: 25px;cursor: pointer;-webkit-transform: rotateY(0);transform: rotateY(0);-webkit-transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);} 
 
.burger__patty {width: 28px;height: 2px;margin: 0 0 4px 0;background: black;-webkit-transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);} 
 
.burger__patty:last-child {margin-bottom: 0;} 
 
.burger--close {-webkit-transform: rotate(180deg);transform: rotate(180deg);} 
 
.burger--close .burger__patty:nth-child(1) {-webkit-transform: rotate(45deg) translate(4px, 4px);transform: rotate(45deg) translate(4px, 4px);} 
 
.burger--close .burger__patty:nth-child(2) {opacity: 0;} 
 
.burger--close .burger__patty:nth-child(3) {-webkit-transform: rotate(-45deg) translate(5px, -4px);transform: rotate(-45deg) translate(5px, -4px);} 
 
.menu {position: fixed;top: 0;width: 100%;visibility: hidden;} 
 
.menu--active {visibility: visible;} 
 
.menu__list {display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;-webkit-flex-flow: column wrap;-ms-flex-flow: column wrap;flex-flow: column wrap;-webkit-box-align: center;-webkit-align-items: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: center;-webkit-justify-content:center;-ms-flex-pack: center;justify-content:center;float: left;width: 100%;height: 100vh;overflow: hidden;} 
 
.menu__list {margin: 0;padding: 0;background:rgba(0, 0, 0, 0.5);list-style-type: none;-webkit-transform: translate3d(0, -100%, 0);transform: translate3d(0, -100%, 0);-webkit-transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);} 
 
.menu__list--active {-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);} 
 
.menu__brand {background: #38C5B9;-webkit-transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);-webkit-transform: translate3d(0, 100%, 0);transform: translate3d(0, 100%, 0);} 
 
.menu__brand--active {-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);} 
 
.menu__item {-webkit-transform: translate3d(500px, 0, 0);transform: translate3d(500px, 0, 0);-webkit-transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);} 
 
.menu__item--active {-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);} 
 
.menu__link {display: inline-block;position: relative;font-size: 25px;padding: 5px 0;font-weight: 300;color: white;text-decoration: none;color: white;-webkit-transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);} 
 
.menu__lan{font-family: Helvetica, Arial, 'Noto Sans TC', 'LiHei Pro', 'Microsoft JhengHei', '微軟正黑體', '新細明體', sans-serif;} 
 
.menu__link:before {content: "";position: absolute;bottom: 0;left: 50%;height: 2px;background: white;-webkit-transform: translateX(-50%);transform: translateX(-50%);-webkit-transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);} 
 
.menu__en:before {content: "";position: absolute; bottom: 0;left: 50%;width: 30px;height: 2px;background: white;-webkit-transform: translateX(-50%);transform: translateX(-50%);-webkit-transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);} 
 
.menu__link:hover:before {width: 100%;} 
 
.menu__link:hover{ color:#FFF;} 
 
.menu .menu__item:nth-child(1) {-webkit-transition-delay: 0.1s;transition-delay: 0.1s;} 
 
.menu .menu__item:nth-child(2) {-webkit-transition-delay: 0.2s;transition-delay: 0.2s;} 
 
.menu .menu__item:nth-child(3) {-webkit-transition-delay: 0.3s;transition-delay: 0.3s;} 
 
.menu .menu__item:nth-child(4) {-webkit-transition-delay: 0.4s;transition-delay: 0.4s;} 
 
.menu .menu__item:nth-child(5) {-webkit-transition-delay: 0.5s;transition-delay: 0.5s;} 
 
.menu .menu__item:nth-child(6) {-webkit-transition-delay: 0.6s;transition-delay: 0.6s;} 
 
.desktop_menu{ float:right; margin-right:280px; margin-top:25px;} 
 
.desktop_menu ul li{ float:left; list-style:none; font-size:16px; margin-right:25px; font-weight:400; text-transform:uppercase; } 
 
.desktop_menu ul li a{color:#000;} 
 
.desktop_menu ul li a:hover, .desktop_menu ul li a.active{color:#000;} 
 
.header.menu_change { background-color:#000; background: rgba(0,0,0,0.8); height:100px;} 
 
.header.menu_change_mobile {background: rgba(0,0,0,0.8); height:70px;} 
 
.header.menu_change .desktop_menu ul li a{color:#fff;} 
 
.header.menu_change .desktop_menu ul li a:hover, .header.menu_change .desktop_menu ul li a.active{color:#fff;} 
 

 
.title{ color:#cf6b22; font-size:40px; padding-bottom: 1000px;}

<!DOCTYPE html> 
 
<html lang="en" xml:lang="en"> 
 
    <head> 
 
     <title>test</title> 
 
      
 
     <!-- meta --> 
 
     <meta charset="UTF-8"> 
 
     <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
     <meta name="viewport" content="width=device-width, maximum-scale=1"> 
 
      
 
     <!-- css --> 
 
     <link rel="stylesheet" href="css/circlestar.css"> 
 
    </head> 
 
     
 
    <body> 
 

 
     <!-- Header --> 
 
     <header class="header"> 
 
       <div class="mobile_menu"> 
 
        <div class="burger"> 
 
         <div class="burger__patty"></div> 
 
         <div class="burger__patty"></div> 
 
         <div class="burger__patty"></div> 
 
        </div> 
 
        <nav class="menu"> 
 
         <ul class="menu__list"> 
 
         <li class="menu__item"><a href="#hash1" class="menu__link">HASH1</a></li> 
 
         <li class="menu__item"><a href="#hash2" class="menu__link">HASH2</a></li> 
 
         <li class="menu__item"><a href="#hash3" class="menu__link">HASH3</a></li> 
 
         </ul> 
 
        </nav> 
 
       </div> 
 
     </header> 
 
    
 

 
     <a name="hash1"></a> 
 
     <div class="title">HASH1</div> 
 

 
     <a name="hash2"></a> 
 
     <div class="title">HASH2</div>  
 

 
     <a name="hash3"></a> 
 
     <div class="title">HASH3</div> 
 

 
     <!-- JS for general --> 
 
     <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script> 
 
     <script type="text/javascript" src="js/circlestar.js"></script> 
 

 
    </body> 
 
</html>

Answer 1

あなただけmenuList上のクリックハンドラを追加する必要があります。 burgerでクリックハンドラを指定した場所でこの操作を行うことができます。サイドノートとして

burger.addEventListener('click', toggleMenu, false); 
menuList.addEventListener('click', toggleMenu, false); 

JSFiddle

、あなたの質問にのみ関連するコードを記載してくださいし、必要であれば別のフィドルとして、完全なコードを投稿してください。