Всем драссе.. заранее буду благодарен...
Меню аккордеон.. при клике на блок, открывается и закрывается..
Внутри блока галерея.. при клике на любую картинку, блок не должен закрываться..
Я добавил If при клике, и он срабатывает только при querySelector (возвращает первый который нашел)
но при querySelectorAll он не срабатывает..
Смотрел логи.. по логам не все ок (при клике на первую картинку через querySelector возвращает тру это норма, а вот через querySelectorAll на все картинки выдает фолс.. Все элементы все есть, все чекается.. Проблема лишь в обработке через querySelectorAll )
(function showProjects() {
/* PUSH HTML BLOCK */
for (let i = 0; i < projectsArr.length; i++) {
let element = `<div class="project__item">
<div class="project__main">
<img src=${projectsArr[i].img} class="project__img" alt="project__img"/>
<div class="project__info">
<h2 class="project__title">${projectsArr[i].name}</h2>
<p class="project__subtitle"></p>${projectsArr[i].text}></p>
</div>
</div>
<div class="project__description">
<h2 class="project__desc--title">Характеристики</h2>
<p class="project__desc--text">${projectsArr[i].info}</p>
<div class="images__gallery" id="projects-gallary">
</div>
</div>
<div class="arrow__down">
<i class="uil uil-angle-down dropdown__icon"></i>
</div>
</div>`
document.getElementById('projects').innerHTML += element
}
})()
;(function pushImg() {
for (let item of projectsArr) {
if (item.hasOwnProperty('images')) {
let srcArr = Object.values(item.images)
for (let el of srcArr) {
let domImg = `
<a href="${el}" class="images__gallery--link" data-gallery="gallery1">
<img
src="${el}"
class="images__gallery--item"
alt="project__img"
/>
</a>
`
document.getElementById('projects-gallary').innerHTML += domImg
lightGallery(document.getElementById('projects-gallary'), {
thumbnail: true,
})
}
} else {
const empty = `
<div class="message">
<h1 class="empty__img">Нет изображений</h1>
</div>
`
document.getElementById('projects-gallary').innerHTML += empty
}
}
})()
/* ACCORDION PROJECTS */
const acc = document.querySelectorAll('.project__item')
const gallery = document.querySelectorAll('.images__gallery--item')
for (item of acc) {
console.log(gallery)
item.addEventListener('click', function (e) {
console.log(e.target == gallery)
if (e.target !== gallery) {
if (this.classList.contains('active')) {
this.classList.remove('active')
} else {
acc.forEach((el) => el.classList.remove('active'))
this.classList.add('active')
}
} else {
this.classList.add('active')
}
})
}
