单击菜单项之一时的菜单下拉菜单

Question

我想用 js 函数制作一个下拉菜单，点击其中一个菜单项。 我试图用下面的函数来实现这一点，但它不起作用。 你能告诉我我的错误在哪里吗？ 我想使用纯 javascript，如果它改变了某些东西，我将使用 SASS。

这是代码：

 let home = document.getElementById('home'); let underhome = document.querySelector('under-home'); home.addEventListener('click', function() { underhome.classList.toggle('open'); });

 .navbar .slider .hammburger-links { padding: 0 1.250em; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .navbar .slider .hammburger-links a { padding: 0 1.500em; text-decoration: none; font-family: "Helvetica", Arial; font-size: 11px; color: #a6adb4; } .navbar .slider .hammburger-links .under-home { position: absolute; top: 5%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; background: #F6F8F9; min-width: 12.5em; min-height: 12.5em; z-index: 1; display: none; } .navbar .slider .hammburger-links .under-home a { margin: 10px 0; } .navbar .slider .hammburger-links .open { display: inline;

 <div class="navbar"> <div class="slider"> <div class="hammburger-links"> <a href="" id="home">HOME</a> <div class="under-home"> <a href="">WORLD NEWS</a> <a href="">TRAVEL</a> <a href="">TECHNOLOGY</a> <a href="">CITY</a> <a href="">CULTURE</a> <a href="">MORE...</a> </div> <a href="">DISCOVERY</a> <a href="">PHOTOS</a> <a href="">CONTACT</a> <img src="images/navbar-img.png" alt=""> </div> </div> </div>

Answer 1

有很多变化 - 主要解释如下：

• 首先添加了您的代码段中缺少的navbar包装器，而您的.querySelector('under-home')缺少. （类选择器），

• 添加position: relative对于.hammburger-links以便子菜单绝对相对于该元素定位，

• 在您的eventListener 中添加了e.preventDefault()以便禁用单击超链接的默认操作（我们希望菜单在此处正确切换），

• 在.open使用display: flex而不是display: inline ，

请参阅下面的演示：

 let home = document.getElementById('home'); let underhome = document.querySelector('.under-home'); home.addEventListener('click', function(e) { e.preventDefault(); /* prevent default hyperlink action */ underhome.classList.toggle('open'); });

 .navbar .slider .hammburger-links { padding: 0 1.250em; display: flex; align-items: center; position: relative; /* added */ } .navbar .slider .hammburger-links a { padding: 0 1.500em; text-decoration: none; font-family: "Helvetica", Arial; font-size: 11px; color: #a6adb4; } .navbar .slider .hammburger-links .under-home { position: absolute; top: 1.5em; /* adjusted */ display: flex; flex-direction: column; background: #F6F8F9; min-width: 12.5em; min-height: 12.5em; z-index: 1; display: none; } .navbar .slider .hammburger-links .under-home a { margin: 10px 0; } .navbar .slider .hammburger-links .open { display: flex; /* changed */ }

 <div class="navbar"> <div class="slider"> <div class="hammburger-links"> <a href="" id="home">HOME</a> <div class="under-home"> <a href="">WORLD NEWS</a> <a href="">TRAVEL</a> <a href="">TECHNOLOGY</a> <a href="">CITY</a> <a href="">CULTURE</a> <a href="">MORE...</a> </div> <a href="">DISCOVERY</a> <a href="">PHOTOS</a> <a href="">CONTACT</a> <img src="https://via.placeholder.it/200" alt=""> </div> </div> </div>

Answer 2

尝试这个

 let home = document.getElementById('home'); home.addEventListener('click', function() { var element = document.getElementById('under_home'); element.classList.toggle("open"); });

 .navbar .slider .hammburger-links { padding: 0 1.250em; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .navbar .slider .hammburger-links a { padding: 0 1.500em; text-decoration: none; font-family: "Helvetica", Arial; font-size: 11px; color: #a6adb4; } .navbar .slider .hammburger-links .under-home { position: absolute; top: 14%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; background: #F6F8F9; min-width: 12.5em; min-height: 12.5em; z-index: 1; display: none; } .navbar .slider .hammburger-links .under-home a { margin: 10px 0; } .navbar .slider .hammburger-links .open { display: inline; }

 <div class="navbar"> <div class="slider"> <div class="hammburger-links"> <a href="" id="home">HOME</a> <div class="under-home" id="under_home"> <a href="">WORLD NEWS</a> <a href="">TRAVEL</a> <a href="">TECHNOLOGY</a> <a href="">CITY</a> <a href="">CULTURE</a> <a href="">MORE...</a> </div> <a href="">DISCOVERY</a> <a href="">PHOTOS</a> <a href="">CONTACT</a> <img src="images/navbar-img.png" alt=""> </div> </div> </div>