單擊菜單內的鏈接后，如何將漢堡包菜單圖標重置回未打開狀態？

Question

所以我決定動畫我以前沒有動畫的漢堡菜單，所以這個問題一開始就無關緊要。

動畫以標准的漢堡式菜單開始，其中包含指向主頁不同區域的多個鏈接。 單擊時，我將菜單動畫化為從漢堡包變成 x，向訪問者表明他們可以通過單擊 x 來關閉菜單。 但是，我遇到了一個問題，在單擊漢堡菜單中的鏈接后，圖標不會從 x 重置回漢堡，這會弄亂菜單的第二次打開方式。 如果訪問者再次打開它，當點擊 x 時 x 會變成漢堡包，這沒有任何意義。

無論如何，我只是想知道是否有一種方法可以使當單擊菜單中的鏈接時，x 返回到其未打開的漢堡包形式。 這是我的代碼：

 var links = document.querySelectorAll('.menu a'); var linksLength = links.length for(var i = 0; i < linksLength; i++) { links[i].addEventListener('click', function() { document.getElementById('toggle').checked = false; }); } $(document).ready(function(){ $('.icon').click(function(){ $(this).toggleClass('open'); }); });

 .header { position: absolute; top: 0px; left: 0px; width: 327px; height: 70px; line-height: 70px; padding-left: 15px; font-family: 'Burbank', 'Alegreya Sans SC', 'Alegreya Sans SC Black', sans-serif; font-size: 40px; color: #ffffff; z-index: 2; user-select: none; -moz-user-select: none; -ms-user-select: none; -webkit-user-select: none; } .heading { position: absolute; top: 0px; left: 0px; width: 327px; height: 67px; padding-left: 15px; z-index: 3; } .nav { position: absolute; top: 0px; height: 70px; background-color: #223861; box-shadow: 0px 3px 10px 0px rgba(39,38,38,0.6); -webkit-box-shadow: 0px 3px 10px 0px rgba(39,38,38,0.6); -moz-box-shadow: 0px 3px 10px 0px rgba(39,38,38,0.6); text-align: right; z-index: 1; user-select: none; -moz-user-select: none; -ms-user-select: none; -webkit-user-select: none; } .icon { position: relative; float: right; width: 100px; height: 70px; padding-left: 13px; cursor: pointer; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; -o-transition: .5s ease-in-out; transition: .5s ease-in-out; } .icon span { position: absolute; left: 0; display: block; height: 5px; width: 45px; margin-left: 75px; margin-top: 18px; background: #ffffff; border-radius: 4px; opacity: 1; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out; } .icon span:nth-child(1) { top: 0px; } .icon span:nth-child(2) { top: 12px; } .icon span:nth-child(3) { top: 24px; } .icon.open span:nth-child(1) { top: 12px; -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -o-transform: rotate(135deg); transform: rotate(135deg); } .icon.open span:nth-child(2) { opacity: 0; left: -60px; } .icon.open span:nth-child(3) { top: 12px; -webkit-transform: rotate(-135deg); -moz-transform: rotate(-135deg); -o-transform: rotate(-135deg); transform: rotate(-135deg); } .header { width: 90%; } .icon { display: block; padding-right: 22px; cursor: pointer; } .menu { max-height: 0px; transition: max-height .5s ease-in-out; opacity: 0; overflow: hidden; } .menu a { display: block; height: 8vh; line-height: 8vh; margin: 0px; padding: 0px 0px; border-bottom: 1px solid #eaeaeb; } #toggle { display: none; } #toggle:checked + .menu { max-height: 800px; opacity: 1; } #toggle:not(checked) + .menu { max-height: 0px; opacity: 1; }

 <label class="nav" for="toggle" style="z-index:999;"> <div class="icon"> <span></span> <span></span> <span></span> </div> <input type="checkbox" id="toggle"/> <div class="menu"> <a href="#assault-rifle-nav">Assault Rifles</a> <a href="#submachine-gun-nav">Submachine Guns</a> <a href="#shotgun-nav">Shotguns</a> <a href="#sniper-rifle-nav">Sniper Rifles</a> <a href="#pistol-nav">Pistols</a> <a href="#explosive-nav">Explosives</a> <a href="#other-nav">Other</a> <a href="#vaulted-nav" id="vaulted">Vaulted</a> </div> </label> <script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>

Answer 1

只需在$(document).ready()函數內添加此單擊處理程序，即可在單擊菜單鏈接之一時從漢堡包圖標中刪除open CSS 類：

    $('.menu a').click(function() {
       $('.icon').removeClass('open');
    });

Answer 2

你也可以通過PURE CSS來做到這一點

 .navigation__checkbox { display: none } .navigation__button { height: 7rem; width: 7rem; position: fixed; top: 1rem; left: 1rem; border-radius: 50%; z-index: 2000; box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.1); text-align: center; cursor: pointer } .navigation__icon { position: relative; margin-top: 3.5rem; user-select: none; } .navigation__icon, .navigation__icon::before, .navigation__icon::after { width: 3rem; height: 2px; background-color: #333; display: inline-block } .navigation__icon::before, .navigation__icon::after { content: ""; position: absolute; left: 0; transition: all .2s } .navigation__icon::before { top: -.8rem } .navigation__icon::after { top: .8rem } .navigation__button:hover .navigation__icon::before { top: -1rem } .navigation__button:hover .navigation__icon::after { top: 1rem } .navigation__checkbox:checked+.navigation__button .navigation__icon { background-color: transparent } .navigation__checkbox:checked+.navigation__button .navigation__icon::before { top: 0; transform: rotate(135deg) } .navigation__checkbox:checked+.navigation__button .navigation__icon::after { top: 0; transform: rotate(-135deg) }

 <div class="navigation"> <input type="checkbox" class="navigation__checkbox" id="navi-toggle"> <label for="navi-toggle" class="navigation__button"> <span class="navigation__icon">&nbsp;</span> </label> </div>