如何解決這個不斷擴大的問題？

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添加到當前目標