這個javascript手風琴代碼有什么問題？
[英]what is wrong with this javascript accordion code?
問題描述
var btn = document.querySelector('.btn'); var activePanel = document.querySelector('.active'); var hiddenPanel = document.querySelectorAll("section > div:not(.active)"); var i; for (i = 0; i < btn.length; i++) { btn[i].addEventListener("click", function() { var panel = this.nextElementSibling; var otherPanels = document.querySelectorAll("section > div:not(.active)"); panel.classList.add('.active'); otherPanels.classList.add('.hidden'); } }); };
* { margin: 0; padding: 0; box-sizing: border-box; } .btn { color: white; background-color: brown; cursor: pointer; } .panel { display: none; } .active { display: block; } .hidden { display: none; }
<body> <section id="accordion"> <h3 class="btn">button1</h3> <div class="panel">panel1</div> <h3 class="btn">button2</h3> <div class="panel">panel2</div> <h3 class="btn">button3</h3> <div class="panel">panel3</div> <h3 class="btn">button4</h3> <div class="panel">panel4</div> </section> </body>
你好，
請我正在嘗試編寫一個 javascript 手風琴，但我的代碼不起作用
我想要做的是當我單擊按鈕時，它僅通過將活動類添加到此面板並同時向所有其他面板添加隱藏類來顯示其面板
所以當我點擊按鈕時，它會上下滑動
並且只有一個面板顯示然后當我單擊其他按鈕時它會滑下自己的面板並自動向上滑動另一個面板
請提前提供幫助和非常感謝
4 個解決方案
解決方案1
1 2020-01-15 09:17:12
var btn = document.querySelectorAll('.btn'); var activePanel = document.querySelector('.active'); var hiddenPanel = document.querySelectorAll("section > div:not(.active)"); var i; for (i = 0; i < btn.length; i++) { btn[i].addEventListener("click", function() { var panel = this.nextElementSibling; if (panel.classList.contains('active')) { panel.classList.remove('active'); panel.classList.add('hidden'); } else { var otherPanels = Array.from(document.querySelectorAll("section > div")); otherPanels.forEach(p => p.classList.add('hidden')); panel.classList.remove('hidden'); panel.classList.add('active'); } } ); }
* { margin: 0; padding: 0; box-sizing: border-box; } .btn { color: white; background-color: brown; cursor: pointer; } .panel { display: none; } .active { display: block; } .hidden { display: none; }
<body> <section id="accordion"> <h3 class="btn">button1</h3> <div class="panel">panel1</div> <h3 class="btn">button2</h3> <div class="panel">panel2</div> <h3 class="btn">button3</h3> <div class="panel">panel3</div> <h3 class="btn">button4</h3> <div class="panel">panel4</div> </section> </body>
解決方案2
1 2020-01-15 09:19:01
將您的 JavaScript 代碼更改為以下內容：
var btn = document.querySelectorAll('.btn');
var activePanel = document.querySelector('.active');
var hiddenPanel = document.querySelectorAll("section > div:not(.active)");
var i;
for (i = 0; i < btn.length; i++) {
btn[i].addEventListener("click", function() {
var otherPanels = document.querySelectorAll("section > div");
otherPanels.forEach(function (panel) {
panel.classList.remove('hidden');
panel.classList.remove('active');
});
var panel = this.nextElementSibling;
console.log(panel);
panel.classList.add('active');
var otherPanels = document.querySelectorAll("section > div:not(.active)");
otherPanels.forEach(function (panel) {
panel.classList.add('hidden');
});
});
}
代碼在這里： https : //codepen.io/v08i/pen/RwNBJKN
解決方案3
1 2020-01-15 09:50:53
var btn = document.querySelectorAll('.btn');
var activePanel = document.querySelector('.active');
var hiddenPanel = document.querySelectorAll("section > div:not(.active)");
var i;
for (i = 0; i < btn.length; i++) {
btn[i].addEventListener("click", function() {
var panel = this.nextElementSibling;
var otherPanels = document.querySelectorAll("section > div.active");
otherPanels.forEach((item) => {item.classList.remove('active');})
panel.classList.add('active');
}
);
};
不要使用隱藏類，因為您已經在.panel類中添加了“ display:none ”，因此您只需要刪除並添加active類
解決方案4
1 已采納 2020-01-15 09:56:07
添加到已經提到語法錯誤和其他修復的人。 您不需要任何循環、數組處理（如 forEach 等）以及每個按鈕的許多事件偵聽器。 這是帶有事件偵聽器部分的簡單明了的解決方案：
let section = document.querySelector('#accordion');
section.addEventListener("click", function(event) {
if(!event.target.classList.contains('btn')) return;
let activePanel = section.querySelector('.active');
let clickedPanel = event.target.nextElementSibling;
clickedPanel.classList.add('active');
activePanel && activePanel.classList.remove('active');
});
沒有循環，只有一個事件偵聽器，並且您只能使用一個當前元素和一個以前處於活動狀態的元素（如果有）！
希望能幫助到你
此JavaScript代碼有什么問題？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.