在JavaScript中單擊另一個手風琴時，刪除活動的手風琴

Question

我需要幫助來解決側邊欄的JavaScript代碼。 我看到很多參考資料和幫助通常可以通過jQuery完成。 我知道jQuery很強大，但是由於我是新手，所以我更喜歡常規JavaScript。

如果您正在閱讀本文，請不要將其標記為duplicate或devote因為我從事JavaScript研究已有一段時間了，希望這篇文章對我自己和其他想使用常規JavaScript的人有用。

繼續，我實際上是從w3Schools學習創建一個簡單的手風琴，您可以在這里參考。

同時，我已經成功創建了自定義邊欄。 但問題是我希望我的活動手風琴在單擊其他手風琴時關閉。

操場：

 const sideBar = document.getElementsByClassName('pisti-sidebar'); for (let i = 0; i < sideBar.length; i++) { sideBar[i].addEventListener('click', function() { const sideBarTitle = this.nextElementSibling; sideBarTitle.style.display == 'none'; if (sideBarTitle.style.display === 'block') { sideBarTitle.style.display = 'none'; } else { sideBarTitle.style.display = 'block'; document.querySelectorAll('.pisti-sidebar')[i].classList.remove('onload-active'); document.querySelectorAll('.pisti-sidebar-title')[i].classList.remove('onload-active'); } }); } 

 body { background: #000000 !important; width: 100vw; height: 100vh; padding: 20px; } /* pisti-sidebar goes here */ .pisti-sidebar { background: none !important; border: none; border-left: 2px solid #888888; color: #888888; cursor: pointer; font-size: 20px; font-weight: 400; padding: 10px 30px 10px 20px; text-align: left; transition: 0.3s all ease; width: 100%; } .pisti-sidebar:first-child { padding-top: 0; } .pisti-sidebar-title { border-left: 2px solid #888888; display: none; overflow: hidden; transition: 0.3s all ease; } .pisti-sidebar:hover { border-color: #FFFFFF; color: #f7cc1b; transition: 0.3s all ease; } .pisti-sidebar-active, .pisti-sidebar:active, .pisti-sidebar:focus { border-color: #FFFFFF; color: #f7cc1b !important; outline: none; } .pisti-sidebar:focus+.pisti-sidebar-title { border-color: #FFFFFF; transition: 0.3s all ease; } .pisti-sidebar-content { color: #888888 !important; display: block; font-size: 16px; padding: 0px 30px 10px 30px; transition: 0.3s all ease; } .pisti-sidebar-content:hover { color: #FFFFFF !important; text-decoration: none; transition: 0.3s all ease; } .pisti-sidebar-content:first-child { padding-top: 10px; } .pisti-sidebar-content:last-child { padding-bottom: 10px; } /* pisti-sidebar active */ .onload-active { color: #f7cc1b; border-color: #FFFFFF; display: block; } .onload-unactive { color: #FFFFFF; border-color: #888888; } .pisti-sidebar:focus+.pisti-sidebar-title { border-color: #FFFFFF; transition: 0.3s all ease; } .pisti-sidebar-title-active { border-color: #FFFFFF; } .pisti-sidebar-title-active, .pisti-sidebar-content-active { color: #f7cc1b !important; } .pisti-sidebar-content-active::before { background-color: #FFFFFF; border-top-right-radius: 2px; border-bottom-right-radius: 2px; content: ''; height: 10px; left: 16px; margin-top: 8px; position: absolute; width: 6px; } 

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <div class="container"> <div class="row"> <div class="col-12"> <button class="pisti-sidebar onload-active" data-pisti-sidebar="pisti-sidebar-1">Appareal</button> <!-- pisti-sidebar-active --> <div class="pisti-sidebar-title onload-active"> <!-- pisti-sidebar-title-active --> <a href="#" class="pisti-sidebar-content">Custom shirt</a> <a href="#" class="pisti-sidebar-content">Event shirt</a> <a href="#" class="pisti-sidebar-content">Corporate shirt</a> <!-- pisti-sidebar-content-active --> </div> <button class="pisti-sidebar" data-pisti-sidebar="pisti-sidebar-2">Digital Printing</button> <!-- pisti-sidebar-active --> <div class="pisti-sidebar-title"> <!-- pisti-sidebar-title-active --> <a href="#" class="pisti-sidebar-content">Poster</a> <a href="#" class="pisti-sidebar-content">Banner</a> <a href="#" class="pisti-sidebar-content">Bunting</a> <!-- pisti-sidebar-content-active --> </div> <button class="pisti-sidebar" data-pisti-sidebar="pisti-sidebar-3">Offset Printing</button> <!-- pisti-sidebar-active --> <div class="pisti-sidebar-title"> <!-- pisti-sidebar-title-active --> <a href="#" class="pisti-sidebar-content">Name card</a> <a href="#" class="pisti-sidebar-content">Flyer</a> <a href="#" class="pisti-sidebar-content">Booklet</a> <!-- pisti-sidebar-content-active --> </div> </div> </div> </div> 

為了進一步解釋，我實際上添加了：

document.querySelectorAll('.pisti-sidebar')[0].classList.remove('onload-active');
document.querySelectorAll('.pisti-sidebar-title')[0].classList.remove('onload-active');

刪除第一手風琴上的課程，以便將其關閉。 但是我不知道單擊第三或第一手風琴時如何關閉第二手風琴。

Answer 1

更改了CSS和JS，以排除在for循環中切換的列表。 相反，只需在按鈕上切換.active類，然后使用相鄰的選擇器.pisti-sidebar.active + .pisti-sidebar-title即可顯示其列表。

 const sideBars = document.getElementsByClassName('pisti-sidebar'); for (let sideBar of sideBars) { sideBar.onclick = e => { var thisEl = e.target; if (thisEl.classList.contains('active')) { thisEl.classList.remove('active'); } else { thisEl.classList.add('active'); for (activeSideBar of sideBars) { if (activeSideBar != thisEl) { activeSideBar.classList.remove('active'); } } } } } 

 body { background: #000000 !important; width: 100vw; height: 100vh; padding: 20px; } .pisti-sidebar { background: none !important; border: none; border-left: 2px solid #888888; color: #888888; cursor: pointer; font-size: 20px; font-weight: 400; padding: 10px 30px 10px 20px; text-align: left; transition: 0.3s all ease; width: 100%; } .pisti-sidebar:first-child { padding-top: 0; } .pisti-sidebar-title { border-left: 2px solid #888888; display: none; overflow: hidden; transition: 0.3s all ease; } .pisti-sidebar:active, .pisti-sidebar:focus { outline: none; } .pisti-sidebar.active+.pisti-sidebar-title { display: block; } .pisti-sidebar-content { color: #888888 !important; display: block; font-size: 16px; padding: 0px 30px 10px 30px; transition: 0.3s all ease; } .pisti-sidebar-content:hover { color: #FFFFFF !important; text-decoration: none; transition: 0.3s all ease; } .pisti-sidebar-content:first-child { padding-top: 10px; } .pisti-sidebar-content:last-child { padding-bottom: 10px; } .active { color: #f7cc1b; border-color: #FFFFFF; display: block; } .onload-unactive { color: #FFFFFF; border-color: #888888; } .pisti-sidebar:focus+.pisti-sidebar-title { border-color: #FFFFFF; transition: 0.3s all ease; } .pisti-sidebar-title-active { border-color: #FFFFFF; } .pisti-sidebar-title-active, .pisti-sidebar-content-active { color: #f7cc1b !important; } .pisti-sidebar-content-active::before { background-color: #FFFFFF; border-top-right-radius: 2px; border-bottom-right-radius: 2px; content: ''; height: 10px; left: 16px; margin-top: 8px; position: absolute; width: 6px; } 

 <div class="container"> <div class="row"> <div class="col-12"> <button class="pisti-sidebar active" data-pisti-sidebar="pisti-sidebar-1">Appareal</button> <!-- pisti-sidebar-active --> <div class="pisti-sidebar-title"> <!-- pisti-sidebar-title-active --> <a href="#" class="pisti-sidebar-content">Custom shirt</a> <a href="#" class="pisti-sidebar-content">Event shirt</a> <a href="#" class="pisti-sidebar-content">Corporate shirt</a> <!-- pisti-sidebar-content-active --> </div> <button class="pisti-sidebar" data-pisti-sidebar="pisti-sidebar-2">Digital Printing</button> <!-- pisti-sidebar-active --> <div class="pisti-sidebar-title"> <!-- pisti-sidebar-title-active --> <a href="#" class="pisti-sidebar-content">Poster</a> <a href="#" class="pisti-sidebar-content">Banner</a> <a href="#" class="pisti-sidebar-content">Bunting</a> <!-- pisti-sidebar-content-active --> </div> <button class="pisti-sidebar" data-pisti-sidebar="pisti-sidebar-3">Offset Printing</button> <!-- pisti-sidebar-active --> <div class="pisti-sidebar-title"> <!-- pisti-sidebar-title-active --> <a href="#" class="pisti-sidebar-content">Name card</a> <a href="#" class="pisti-sidebar-content">Flyer</a> <a href="#" class="pisti-sidebar-content">Booklet</a> <!-- pisti-sidebar-content-active --> </div> </div> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>