[英]Making dropdown menu in html & css with javascript or jquery
[英]Dropdown menu with html css javascript
如果有人可以帮忙吗? 代码有什么问题:/我正在尝试制作一个下拉菜单,但 javascript 代码有问题。
收到此错误:main.js: 9 Uncaught TypeError: 无法在 HTMLAnchorElement 处读取未定义的属性(读取“添加”)。 (main.js:9)
它说问题在于添加 add class on sidebarUl.classList.add('show');
const sidebarBtn = document.querySelectorAll('.sidebar-btn'); const sidebarUl = document.querySelectorAll('.sidebar-ul'); sidebarBtn.forEach((btn) => btn.addEventListener('click', function (e) { const clicked = e.target; console.log(clicked); if (clicked) { sidebarUl.classList.add('show'); } else { sidebarUl.classList.remove('show'); } }) );
.shop-sidenav { position: fixed; width: 20%; height: 100%; }.sidebar ul { height: 100%; width: 100%; }.sidebar ul li { line-height: 60px; border-bottom: 1px solid var(--primary-color); }.sidebar ul li a { padding-left: 2rem; display: block; width: 100%; border-left: 1 px solid var(--primary-color); }.sidebar ul li a:hover { color: var(--secondery-color); }.sidebar ul li a span { float: right; color: var(--secondery-color); transition: transform 0.3s; }.sidebar ul li a:active span { transform: rotate(-180deg); }.sidebar ul ul { position: static; display: none; }.sidebar-ul.show { display: block; }.sidebar ul ul li { border-bottom: none; line-height: 40px; }.sidebar ul ul li a { color: var(--secondery-color); padding-left: 4rem; }
<nav class="sidebar"> <div class="shop-sidenav"> <ul> <li> <a href="#" class="sidebar-btn">Bikes<span>⮟</span></a> <ul class="sidebar-ul"> <li><a href="#">Giant</a></li> <li><a href="#">Piaggio</a></li> <li><a href="#">Trek</a></li> <li><a href="#">Scoot</a></li> <li><a href="#">Canyon</a></li> <li><a href="#">Cube</a></li> </ul> </li> <li> <a href="#" class="sidebar-btn">Clothing <span>⮟</span></a> <ul class="sidebar-ul"> <li><a href="#">Enduro</a></li> <li><a href="#">Scoot</a></li> <li><a href="#">Fox</a></li> </ul> </li> <li><a href="#">Accessories</a></li> <li> <a href="#" class="sidebar-btn">Components<span>⮟</span></a> <ul class="sidebar-ul"> <li><a href="#">Wheels</a></li> <li><a href="#">Chain</a></li> <li><a href="#">Gears</a></li> <li><a href="#">Brakes</a></li> <li><a href="#">Pumps</a></li> <li><a href="#">Amortizers</a></li> </ul> </li> </ul> </div> </nav>
document.querySelectorAll
返回一个节点列表。 所以在添加 class show
到 sidebarUl 时,你需要指定你需要添加到哪个元素。 forEach
循环给你一个索引,你可以用它来实现
const sidebarBtn = document.querySelectorAll(".sidebar-btn");
const sidebarUl = document.querySelectorAll(".sidebar-ul");
sidebarBtn.forEach((btn,index) =>
btn.addEventListener("click", function (e) {
sidebarUl.forEach(ul=>{
ul.classList.remove("show")
})
sidebarUl[index].classList.add("show");
})
);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.