Saya telah membuat lungsur turun yang berjaya menogol, tetapi ia nampaknya hanya memilih kelas pertama dan apabila saya mengklik lungsur kedua, ia menogol kandungan lungsur pertama. Adakah saya kehilangan sesuatu di sini? Ini kod saya:
const menuListDropdown = document.querySelectorAll('.menu-block-dropdown');
const menuBlock = document.querySelector('.menu-block');
menuListDropdown.forEach((menuBlockList) => {
menuBlockList.addEventListener('click', function() {
menuBlock.classList.toggle('menu-block-active');
})
})
.menu-block {
background: #fff;
box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 5px 0px, rgba(0, 0, 0, 0.1) 0px 0px 1px 0px;
padding: 15px;
border-radius: 8px;
position: absolute;
top: 35px;
opacity: 0;
transition: 150ms ease;
}
.menu-block-active {
transition: 150ms all;
opacity: 1;
}
.menu-block-list {
display: flex;
flex-direction: column;
gap: 15px;
}
.menu-block-list a {
color: #444444;
margin: 0 0 0.25 0;
padding: 0;
font-weight: 500;
}
<li class="menu-block-dropdown">
<a href="#">Resources</a>
<div class="menu-block">
<div class="menu-block-list">
<a href="#">Dropdown 1</a>
<a href="#">Dropdown 2</a>
</div>
</div>
</li>
<li class="menu-block-dropdown">
<a href="#">Blogs</a>
<div class="menu-block">
<div class="menu-block-list">
<a href="#">Dropdown 3</a>
<a href="#">Dropdown 4</a>
</div>
</div>
</li>
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Masalahnya, anda hanya memilih satu dropdown. Jadi apa yang anda perlu lakukan ialah memilih menu lungsur yang dikaitkan dengan pautan menu yang anda klik.
Lihat di bawah perubahan yang saya buat pada
JSconst menuListDropdown = document.querySelectorAll('.menu-block-dropdown'); // Not needed // const menuBlock = document.querySelector('.menu-block'); menuListDropdown.forEach((menuBlockList) => { menuBlockList.addEventListener('click', function() { // Select the Block within the Target List const menuBlock = menuBlockList.querySelector(".menu-block"); menuBlock.classList.toggle('menu-block-active'); }) }).menu-block { background: #fff; box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 5px 0px, rgba(0, 0, 0, 0.1) 0px 0px 1px 0px; padding: 15px; border-radius: 8px; position: absolute; top: 35px; opacity: 0; transition: 150ms ease; } .menu-block-active { transition: 150ms all; opacity: 1; } .menu-block-list { display: flex; flex-direction: column; gap: 15px; } .menu-block-list a { color: #444444; margin: 0 0 0.25 0; padding: 0; font-weight: 500; } li { display: inline-block; }