javascript - 单击菜单链接时关闭单页网站上的全屏 JS 菜单

Question

我正在尝试菜单创意。我的 JS 知识很少，所以我想知道我想要实现的目标是否可行。

我一直在玩 codrops 的多框菜单 this menu

从外观上看，菜单旨在链接到外部页面，我想做的是链接到同一页面内的部分，就像我希望构建一个单页网站一样，所以我需要的是菜单单击其中一个菜单链接时关闭，因为当前它只是保持打开状态。

我曾尝试在链接的关闭按钮中使用相同的“类”功能，但出于某种原因，这会使关闭按钮消失，这不是一个有效的解决方案。

我查看了已发布的类似问题并尝试使用以前的答案进行修复，但我没有运气。

<main>
			<div class="frame">
				<header class="codrops-header">
					<div class="codrops-links">
						<a class="codrops-icon codrops-icon--prev" href="https://tympanus.net/Development/GridLayoutScrollableContent/" title="Previous Demo"><svg class="icon icon--arrow"><use xlink:href="#icon-arrow"></use></svg></a>
						<a class="codrops-icon codrops-icon--drop" href="https://tympanus.net/codrops/?p=36043" title="Back to the article"><svg class="icon icon--drop"><use xlink:href="#icon-drop"></use></svg></a>
					</div>
					<h1 class="codrops-header__title">Multibox Menu</h1>
				</header>
				<p class="info">12 &mdash; 24 May 2019 &middot; Bannockburn &middot; Stirling &middot; UK</p>
				<a class="github" href="https://github.com/codrops/MultiboxMenu/" title="Find this project on GitHub"><svg class="icon icon--github"><use xlink:href="#icon-github"></use></svg></a>
			</div>
			<div class="content">
				<div class="background" style="background-image: url(img/1.jpg)"></div>
				<h2 class="content__title">Carmeca</h2>
				<p class="content__tagline">Europe's most immersive LARP experience</p>
			</div>
			<nav class="menu">
				<div class="menu__item menu__item--1" data-direction="bt">
					<div class="menu__item-inner">
						<div class="mainmenu">
							<a href="#" class="mainmenu__item">Story</a>
							<a href="#" class="mainmenu__item">Chronicles</a>
							<a href="#" class="mainmenu__item">Tour</a>
							<a href="#" class="mainmenu__item">Contact</a>
						</div>
						<p class="label label--topleft label--vert-mirror">the important stuff</p>
						<p class="label label--bottomright label--vert">made in bannockburn</p>
					</div>
				</div>
				<div class="menu__item menu__item--2" data-direction="lr">
					<div class="menu__item-inner">
						<div class="menu__item-map"></div>
						<a href="#" class="menu__item-hoverlink">The location</a>
					</div>
				</div>
				<div class="menu__item menu__item--3" data-direction="bt">
					<div class="menu__item-inner">
						<div class="sidemenu">
							<a href="#" class="sidemenu__item"><span class="sidemenu__item-inner">The Gameplay</span></a>
							<a href="#" class="sidemenu__item"><span class="sidemenu__item-inner">About LARP</span></a>
							<a href="#" class="sidemenu__item"><span class="sidemenu__item-inner">The Rules</span></a>
							<a href="#" class="sidemenu__item"><span class="sidemenu__item-inner">History</span></a>
							<a href="#" class="sidemenu__item"><span class="sidemenu__item-inner">People</span></a>
							<a href="#" class="sidemenu__item"><span class="sidemenu__item-inner">Join</span></a>
							<a href="#" class="sidemenu__item"><span class="sidemenu__item-inner">...</span></a>
						</div>
					</div>
				</div>
				<div class="menu__item menu__item--4" data-direction="rl">
					<div class="menu__item-inner">
						<p class="label label--topleft label--line">Join us now</p>
						<a href="#" class="menu__item-link">Learn how to <br> participate</a>
					</div>
				</div>
				<div class="menu__item menu__item--5" data-direction="tb">
					<div class="menu__item-inner">
						<p class="quote">Hail to thee, our infantry, still brave, beyond the grave</p>
					</div>
				</div>
				<button class="action action--menu"><svg class="icon icon--menu"><use xlink:href="#icon-menu"></use></svg></button>
				<button class="action action--close"><svg class="icon icon--close"><use xlink:href="#icon-close"></use></svg></button>
			</nav>
		</main>

{
    // Class Menu.
    class Menu {
        constructor(el) {
            this.DOM = {el: el};
            // Open and close ctls.
            this.DOM.openCtrl = this.DOM.el.querySelector('.action--menu');
            this.DOM.closeCtrl = this.DOM.el.querySelector('.action--close');
            this.DOM.openCtrl.addEventListener('click', () => this.open());
            this.DOM.closeCtrl.addEventListener('click', () => this.close());
            this.DOM.openCtrl.addEventListener('mouseenter', () => {
                allowTilt = false;
                tilt.reset()
            });
            this.DOM.openCtrl.addEventListener('mouseleave', () => {
                allowTilt = true;
            });

            // The menu items.
            this.DOM.items = Array.from(this.DOM.el.querySelectorAll('.menu__item'));
            // The total number of items.
            this.itemsTotal = this.DOM.items.length;

            // Custom elements that will be animated.
            this.DOM.mainLinks = this.DOM.el.querySelectorAll('.mainmenu > a.mainmenu__item');
            this.DOM.sidemenuLinks = this.DOM.el.querySelectorAll('.sidemenu span.sidemenu__item-inner');
            this.DOM.menulink = this.DOM.el.querySelector('.menu__item-link');
        }
        // Open the menu.
        open() {
            this.toggle('open');
        }
        // Close the menu.
        close() {
            this.toggle('close');
        }
        toggle(action) {
            if ( this.isAnimating ) return;
            // (dis)allow the main image tilt effect.
            allowTilt = action === 'open' ? false : true;
            this.isAnimating = true;
            // Toggling the open state class.
            this.DOM.el.classList[action === 'open' ? 'add' : 'remove']('menu--open');
            // After all is animated..
            const animationEnd = (pos) => {
                if ( pos === this.itemsTotal-1 ) {
                    this.isAnimating = false;
                }
            };

我试图将这行代码从 JS 文件 this.DOM.closeCtrl.addEventListener('click', () => this.close()); 复制过来更改 closeCtrl 并将其替换为 mainLinks 但这没有用，老实说，我完全不知道我在做什么。

我认为对于了解 JS 的人来说，这是一个相当简单的修复。希望你能帮忙。谢谢

Answer 1

我找到了一个解决方案，我确信它可以改进，但不管怎样它都能完成工作......

HTML(添加元素--关闭类)

<a href="#" class="mainmenu__item item--close1">Item1</a>
<a href="#" class="mainmenu__item item--close2">Item2</a>
<a href="#" class="mainmenu__item item--close3">Item3</a>
<a href="#" class="mainmenu__item item--close4">Item4</a>
<a href="#" class="mainmenu__item item--close5">Item5</a>

JAVASCRIPT(添加这段代码demo.js)

// Open and close ctls.
this.DOM.openCtrl = this.DOM.el.querySelector('.action--menu');
this.DOM.closeCtrl = this.DOM.el.querySelector('.action--close');
this.DOM.ItemcloseCtrl1 = this.DOM.el.querySelector('.item--close1');
this.DOM.ItemcloseCtrl2 = this.DOM.el.querySelector('.item--close2');
this.DOM.ItemcloseCtrl3 = this.DOM.el.querySelector('.item--close3');
this.DOM.ItemcloseCtrl4 = this.DOM.el.querySelector('.item--close4');
this.DOM.ItemcloseCtrl5 = this.DOM.el.querySelector('.item--close5');

this.DOM.openCtrl.addEventListener('click', () => this.open());
this.DOM.closeCtrl.addEventListener('click', () => this.close());
this.DOM.ItemcloseCtrl1.addEventListener('click', () => this.close());
this.DOM.ItemcloseCtrl2.addEventListener('click', () => this.close());
this.DOM.ItemcloseCtrl3.addEventListener('click', () => this.close());
this.DOM.ItemcloseCtrl4.addEventListener('click', () => this.close());
this.DOM.ItemcloseCtrl5.addEventListener('click', () => this.close());