我正在玩菜单主意。我的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 — 24 May 2019 · Bannockburn · Stirling · 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的人来说，这是一个相当简单的解决方案。 希望您能提供帮助。谢谢
答案 0 :(得分：0)
我找到了一个解决方案，我敢肯定它可以改进，但是确实可以完成工作...
HTML（添加项目-关闭类）
selectInput('y', 'Y', choices = c("All", unique(as.character(closed_srs3$Name))))
output$outplot1 <- renderPlot({
Created <- as.Date(closed_srs3$Date, '%m/%d/%Y')
ggplot(closed_srs3, aes(y=input$y, x=Created))+
geom_line()
JAVASCRIPT（添加此代码demo.js）
<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>