当点击手风琴(accordion)菜单时,只需要为被点击的手风琴面板(accordion panel)添加或移除类名即可。
HTML代码示例:
面板标题
// 手风琴内容
面板标题
// 手风琴内容
JavaScript代码示例:
const accordionPanels = document.querySelectorAll('.accordion-panel');
accordionPanels.forEach(panel => {
panel.addEventListener('click', () => {
accordionPanels.forEach(panel2 => {
if (panel2 !== panel) {
panel2.classList.remove('active');
}
});
panel.classList.toggle('active');
});
});
在上面的代码示例中,我们首先选择所有的手风琴面板(accordion panels),然后为每个面板添加一个点击事件监听器(event listener)。当面板被点击时,我们首先移除所有面板的'active”类名,然后为被点击的面板添加或移除'active”类名。这样就实现了只为被点击的手风琴面板添加或移除类名的效果。