Добрый день!
Подскажите почему при наличии у класса стиля display:none; в css файле скрипт сначала добавляет этот же стиль в инлайн в html, а только потом начинает отрабатывает чисто на inline, игнорируя то что изначально стиль в css был задан?
<ul class="results__filter-inner">
<li id="differentsID">
<div class="otherblock">
.......someblocks
</div>
<div class="filter__name__list-wrap">
.......someblocks
</div>
</li>
<li id="differentsID">
<div class="otherblock">
.......someblocks
</div>
<div class="filter__name__list-wrap">
.......someblocks
</div>
</li>
<li id="differentsID">
<div class="otherblock">
.......someblocks
</div>
<div class="filter__name__list-wrap">
.......someblocks
</div>
</li>
</ul>
let menuName = document.querySelectorAll('.results__filter-inner>li');
menuName.forEach((button) => {
let subMenu = button.querySelector('.filter__name__list-wrap');
button.addEventListener('click', () => {
if (subMenu){
if (subMenu.style.display == "none"){
subMenu.style.display = "block";
} else {
subMenu.style.display = "none";
}
}
});
});
Получается, что:
filter__name__list-wrap - класс который надо скрывать/показывать, он по умолчанию имеет стиль:
|
Код:
|
.filter__name__list-wrap{
display:none} |
при загрузке страницы выглядит в html просто как
div class="filter__name__list-wrap">
</div>
И при клике на results__filter-inner>li ему сначала присваивается в html инлайн style="display:none":
<ul class=".results__filter-inner">
<li id="differentsID">
<div class="otherblock">
.......someblocks
</div>
<div class="filter__name__list-wrap" style="display:none">
.......someblocks
</div>
</li>
</ul>
и только после этого скрипт начинает работать верно показывая и скрывая блок "filter__name__list-wrap" с одного клика.
Вот и не понятно почему он не обрабатывает стиль уже заданный в css, а работает только с html.
P.S. id - для простоты написал тут один id, т.к. без привязки к id нужен скрипт.
Спасибо!
