单击菜单项时如何切换菜单容器

Question

我是 JS 的初学者。 我在 codepen 上找到了一个移动菜单，但我需要对其进行编辑以使其适合我的需要。 基本上，我需要创建的移动菜单包含几个具有锚点并将用户重定向到页面中的部分的链接。 单击链接后，我发现的 codepen 示例不会关闭菜单。 我试图自己修改代码，但它不起作用。

这里是原始代码笔的链接： https ://codepen.io/Gatsby/pen/YdWGgW

这是我做过但不工作的版本。

(function () {
    let header = document.querySelector('.header');
    let icon = document.querySelector('.icon-container');
    let all = document.querySelectorAll('.menu-item');
    icon.onclick = function () {
        header.classList.toggle('menu-open');
    }
    all.onclick = function () {
        header.classList.toggle('menu-open');
    }
}());

任何帮助将不胜感激。 谢谢你。

Answer 1

你可以这样做：

基本上，您获得所有菜单类，并在它们上添加一个事件侦听器以在每次单击它们时关闭菜单

 (function() { let header = document.querySelector('.header'); let icon = document.querySelector('.icon-container'); let menu_item = document.getElementsByClassName('menu-item'); icon.onclick = function() { header.classList.toggle('menu-open'); } var close = function() { header.classList.toggle('menu-open'); }; for (var i = 0; i < menu_item.length; i++) { menu_item[i].addEventListener('click', close, false); } }());

 @import url(https://fonts.googleapis.com/css?family=Nobile); /* Just container/placeholder rulesets - remove once in production */ body { font-family: "Nobile"; margin: 0 auto; line-height: 1.5; background: #e0e0e0; } .container { background: #f0f0f0; position: relative; overflow: hidden; width: 375px; height: 600px; margin: 50px auto 0; box-shadow: 0 0 50px 10px #aaa; } .container .header { position: absolute; display: block; top: 0; left: 0; } .content { padding: 40px 5% 20px; text-align: justify; max-height: 100%; color: #333; overflow-y: scroll; } .content img { width: 100%; position: relative; display: block; margin: 40px auto 30px; } @media (max-width: 480px) { .container { margin: 0 auto; width: 100%; height: 100%; box-shadow: none; } .container .header { position: fixed; } .content { overflow-y: hidden; } } /* End container/placeholder */ /* Menu Header */ .header { background: rgba(0, 0, 0, 0.8); overflow: hidden; height: 55px; width: 100%; z-index: 1; position: fixed; transition: all 0.4s ease-out, background 1s ease-out; } .header.menu-open { height: 100%; background: #111; transition: all 0.45s ease-out, background 0.8s ease-out; } /* Menu List items */ .mobile-menu { clear: both; } .header ul.menu { position: relative; display: block; padding: 0px 40px 0; list-style: none; } .header ul.menu li.menu-item a { display: block; position: relative; color: #fff; text-decoration: none; font-size: 18px; line-height: 2.8; width: 100%; -webkit-tap-highlight-color: transparent; } .header ul.menu li.menu-item { border-bottom: 1px solid #333; margin-top: 5px; opacity: 0; transition: opacity 0.6s cubic-bezier(0.4, 0.01, 0.165, 0.99), -webkit-transform 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99); transition: transform 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99), opacity 0.6s cubic-bezier(0.4, 0.01, 0.165, 0.99); transition: transform 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99), opacity 0.6s cubic-bezier(0.4, 0.01, 0.165, 0.99), -webkit-transform 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99); } .header ul.menu li.menu-item:nth-child(1) { transition-delay: 0.35s; } .header ul.menu li.menu-item:nth-child(2) { transition-delay: 0.3s; } .header ul.menu li.menu-item:nth-child(3) { transition-delay: 0.25s; } .header ul.menu li.menu-item:nth-child(4) { transition-delay: 0.2s; } .header ul.menu li.menu-item:nth-child(5) { transition-delay: 0.15s; } .header ul.menu li.menu-item:nth-child(6) { transition-delay: 0.1s; } .header ul.menu li.menu-item:nth-child(7) { transition-delay: 0.05s; } .header.menu-open ul.menu li.menu-item { opacity: 1; } .header.menu-open ul.menu li.menu-item:nth-child(1) { transition-delay: 0.05s; } .header.menu-open ul.menu li.menu-item:nth-child(2) { transition-delay: 0.1s; } .header.menu-open ul.menu li.menu-item:nth-child(3) { transition-delay: 0.15s; } .header.menu-open ul.menu li.menu-item:nth-child(4) { transition-delay: 0.2s; } .header.menu-open ul.menu li.menu-item:nth-child(5) { transition-delay: 0.25s; } .header.menu-open ul.menu li.menu-item:nth-child(6) { transition-delay: 0.3s; } .header.menu-open ul.menu li.menu-item:nth-child(7) { transition-delay: 0.35s; } /* Menu Icon */ .icon-container { position: relative; display: inline-block; z-index: 2; float: right; /* Simply change property to float left to switch icon side :) */ height: 55px; width: 55px; cursor: pointer; -webkit-tap-highlight-color: transparent; -webkit-transform: rotate(0deg); transform: rotate(0deg); transition: all 0.3s cubic-bezier(0.4, 0.01, 0.165, 0.99); } .icon-container #menuicon { width: 20px; height: 10px; position: relative; display: block; margin: -4px auto 0; top: 50%; } #menuicon .bar { width: 100%; height: 1px; display: block; position: relative; background: #fff; transition: all 0.3s cubic-bezier(0.4, 0.01, 0.165, 0.99); } #menuicon .bar.bar1 { -webkit-transform: translateY(0px) rotate(0deg); transform: translateY(0px) rotate(0deg); } #menuicon .bar.bar2 { -webkit-transform: translateY(6px) rotate(0deg); transform: translateY(6px) rotate(0deg); } .menu-open .icon-container { -webkit-transform: rotate(90deg); transform: rotate(90deg); } .menu-open .icon-container #menuicon .bar { transition: all 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99); transition-delay: 0.1s; } .menu-open .icon-container #menuicon .bar.bar1 { -webkit-transform: translateY(4px) rotate(45deg); transform: translateY(4px) rotate(45deg); } .menu-open .icon-container #menuicon .bar.bar2 { -webkit-transform: translateY(3px) rotate(-45deg); transform: translateY(3px) rotate(-45deg); }

 <div class="container"> <div class="header"> <div class="icon-container"> <div id="menuicon"> <div class="bar bar1"></div> <div class="bar bar2"></div> </div> </div> <div class="mobile-menu"> <ul class="menu"> <li class="menu-item"><a href="#">Mac</a> </li> <li class="menu-item"><a href="#">iPad</a> </li> <li class="menu-item"><a href="#">iPhone</a> </li> <li class="menu-item"><a href="#">Watch</a> </li> <li class="menu-item"><a href="#">TV</a> </li> <li class="menu-item"><a href="#">Music</a> </li> <li class="menu-item"><a href="#">Support</a> </li> </ul> </div> </div> <div class="content"> <img src="https://images.apple.com/v/iphone/home/y/images/overview/hero-iphone-xr_large.jpg" alt="" /> <p>“With so many trees in the city, you could see the spring coming each day until a night of warm wind would bring it suddenly in one morning. Sometimes the heavy cold rains would beat it back so that it would seem that it would never come and that you were losing a season out of your life. This was the only truly sad time in Paris because it was unnatural. You expected to be sad in the fall. Part of you died each year when the leaves fell from the trees and their branches were bare against the wind and the cold, wintry light."</p> <p><em>- Ernest Hemingway, A Moveable Feast</em></p> <img src="https://images.apple.com/v/iphone/home/y/images/overview/film_large.jpg" alt="" /> <p>"On under the heavy trees of the small town that are a part of your heart if it is your town and you have walked under them, but that are only too heavy, that shut out the sun and dampen the houses for a stranger; out past the last house and on to the highway that rose and fell straight away ahead with banks of red dirt sliced cleanly away and the second growth timber on both sides. It was not his country but it was the middle of fall and all of this country was good to drive through and to see. "</p> <p><em>- Ernest Hemingway, "Fathers and Sons"</em></p> </div> </div>

这里我使用的是document.getElementsByClassName但你也可以使用document.querySelectorAll如果你想使用更复杂的选择器，它会更有用