JS - Wie lade ich die Seite neu, wenn ich auf den Link auf der gleichen Seite klicke?

Question

Ich verwende ein fertiges Plugin für die mobile Navigation, aber ich finde ein Problem. Da es sich bei der Website um eine einseitige Website handelt und die Links in der Navigation mithilfe des Hash-Tags zu verschiedenen Abschnitten auf derselben Seite führen.

Wenn ich auf den Hamburger klicke und einen der Links auswähle, wird der Abschnitt angezeigt, aber die Navigation ist immer noch da! In der Zwischenzeit brauche ich die Seite neu zu laden und nach jedem Link auf den Abschnitt zu gehen. Oder vielleicht könnte sich die Navigation selbst schließen, wenn auf die Verknüpfung geklickt wird.

Entschuldigung, ich verstehe Javascript nicht, bitte bringen Sie mir bei, wie man die Codes ändert, danke im Voraus!

(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

Sie brauchen nur einen Click-Handler auf menuList hinzuzufügen. Sie können dies direkt unter dem Punkt ausführen, wo Sie den Click-Handler unter burger angeben.

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

JSFiddle

Als Randbemerkung, bitte nur den entsprechenden Code in Ihrer Frage enthalten und den vollständigen Code veröffentlichen, wenn nötig, als eine separate Geige sein.