如何解决这个不断扩大的问题？

Question

因此，我尝试创建一个手风琴样式菜单，如果您单击面板，它将打开该部分。 如果再次单击它，它将关闭。 最重要的是，它还应该关闭以前打开的任何其他面板。

我几乎拥有该功能，但问题是我必须单击两次。

明白我的意思，看看这个小提琴

您会注意到，如果打开link one然后尝试打开link 2 ，则必须按两次link 2 。

我怎样才能使它只需要按一次就可以关闭link 1 ，还可以打开link 2 ？

 let dropdown = document.querySelectorAll('.dropdown-toggle'); const handleClick = (e) => { const active = document.querySelector('.open'); if(active){ active.classList.remove('open'); } else { e.currentTarget.nextElementSibling.classList.add('open') } } dropdown.forEach(element => { element.addEventListener('click', handleClick); }); 

 body { background: #ccc; } .menu { background: #fff; margin: 0 auto; max-width: 400px; } .menu ul { padding: 0; text-align: center; width: 100%; } .menu ul li { list-style: none; padding: 20px 0; border-bottom: 1px solid #ccc; } .menu ul li a { text-decoration: none; } .menu ul li .dropdown { display: none; padding: 20px; background: grey; } .menu ul li .dropdown.open { display: block; } 

 <div class="menu"> <ul> <li> <a href="#" class="dropdown-toggle">link 1</a> <div class="dropdown">Some text</div> </li> <li> <a href="#" class="dropdown-toggle">link 2</a> <div class="dropdown">Some text</div> </li> <li> <a href="#" class="dropdown-toggle">link 3</a> <div class="dropdown">Some text</div> </li> <li> <a href="#" class="dropdown-toggle">link 4</a> <div class="dropdown">Some text</div> </li> <li> <a href="#" class="dropdown-toggle">link 5</a> <div class="dropdown">Some text</div> </li> </ul> </div> 

Answer 1

可以使用如下所示的js。

 let dropdown = document.querySelectorAll('.dropdown-toggle'); const handleClick = (e) => { const isLastOpenTargetClicked = e.currentTarget.nextElementSibling.classList.contains('open'); if(isLastOpenTargetClicked) { e.currentTarget.nextElementSibling.classList.remove('open'); return; } const active = document.querySelector('.open'); if(active){ active.classList.remove('open'); } e.currentTarget.nextElementSibling.classList.add('open') } dropdown.forEach(element => { element.addEventListener('click', handleClick); }); 

 body { background: #ccc; } .menu { background: #fff; margin: 0 auto; max-width: 400px; } .menu ul { padding: 0; text-align: center; width: 100%; } .menu ul li { list-style: none; padding: 20px 0; border-bottom: 1px solid #ccc; } .menu ul li a { text-decoration: none; } .menu ul li .dropdown { display: none; padding: 20px; background: grey; } .menu ul li .dropdown.open { display: block; } 

 <div class="menu"> <ul> <li> <a href="#" class="dropdown-toggle">link 1</a> <div class="dropdown">Some text</div> </li> <li> <a href="#" class="dropdown-toggle">link 2</a> <div class="dropdown">Some text</div> </li> <li> <a href="#" class="dropdown-toggle">link 3</a> <div class="dropdown">Some text</div> </li> <li> <a href="#" class="dropdown-toggle">link 4</a> <div class="dropdown">Some text</div> </li> <li> <a href="#" class="dropdown-toggle">link 5</a> <div class="dropdown">Some text</div> </li> </ul> </div> 

Answer 2

无需检查当前元素是否处于活动状态。 在单击处理程序上，您只想检查.nextElementSibling的.classList是否包含 open类。 如果是这样，请将其删除。 如果没有，请套用它。

可以在以下内容中看到：

 let dropdown = document.querySelectorAll('.dropdown-toggle'); const handleClick = (e) => { if (e.currentTarget.nextElementSibling.classList.contains('open')) { e.currentTarget.nextElementSibling.classList.remove('open'); } else { e.currentTarget.nextElementSibling.classList.add('open') } } dropdown.forEach(element => { element.addEventListener('click', handleClick); }); 

 body { background: #ccc; } .menu { background: #fff; margin: 0 auto; max-width: 400px; } .menu ul { padding: 0; text-align: center; width: 100%; } .menu ul li { list-style: none; padding: 20px 0; border-bottom: 1px solid #ccc; } .menu ul li a { text-decoration: none; } .menu ul li .dropdown { display: none; padding: 20px; background: grey; } .menu ul li .dropdown.open { display: block; } 

 <div class="menu"> <ul> <li> <a href="#" class="dropdown-toggle">link 1</a> <div class="dropdown">Some text</div> </li> <li> <a href="#" class="dropdown-toggle">link 2</a> <div class="dropdown">Some text</div> </li> <li> <a href="#" class="dropdown-toggle">link 3</a> <div class="dropdown">Some text</div> </li> <li> <a href="#" class="dropdown-toggle">link 4</a> <div class="dropdown">Some text</div> </li> <li> <a href="#" class="dropdown-toggle">link 5</a> <div class="dropdown">Some text</div> </li> </ul> </div> 

Answer 3

在您的点击处理程序内，循环document.querySelectorAll（'。dropdown-toggle'），从类列表中删除所有打开的内容，然后将open添加到当前目标