每當我嘗試打開該滑塊時，此代碼應通過單擊圖示（箭頭）打開滑塊，它會給我帶來錯誤（accordionHeader.addEventListener 不是功能）
const accordionItems = document.querySelectorAll('.value__accordion-item')
accordionItems.forEach((item) =>{
const accordionHeader = item.querySelectorAll('.value__accordion-header')
accordionHeader.addEventListener('click', () =>{
const openItem = document.querySelector('.accordion-open')
toggleItem(item)
if(openItem && openItem!== item){
toggleItem(openItem)
}
})
})
const toggleItem = (item) =>{
const accordionContent = item.querySelectorAll('.value__accordion-content')
if(item.classList.contains('accordion-open')){
accordionContent.removeAttribute('style')
item.classList.remove('accordion-open')
} else{
accordionContent.style.header = accordionContent.scrollHeight 'px'
item.classList.add('accordion-open')
}
}
uj5u.com熱心網友回復：
const accordionHeader = item.querySelectorAll('.value__accordion-header')回傳 aNodeList所以accordionHeader.addEventListener將不起作用。
我想你正在尋找item.querySelector。將您的代碼更改為此
const accordionItems = document.querySelectorAll('.value__accordion-item')
accordionItems.forEach((item) =>{
const accordionHeader = item.querySelector('.value__accordion-header')
accordionHeader.addEventListener('click', () =>{
const openItem = document.querySelector('.accordion-open')
toggleItem(item)
if(openItem && openItem!== item){
toggleItem(openItem)
}
})
})
const toggleItem = (item) =>{
const accordionContent = item.querySelector('.value__accordion-content')
if(item.classList.contains('accordion-open')){
accordionContent.removeAttribute('style')
item.classList.remove('accordion-open')
} else{
accordionContent.style.header = accordionContent.scrollHeight 'px'
item.classList.add('accordion-open')
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/468499.html
標籤：javascript