style.display работает не верно?
Добрый день!
Подскажите почему при наличии у класса стиля 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{ 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 нужен скрипт. |
Aruta,
проверку делают на "не равно" !="block" |
Цитата:
Цитата:
|
рони,
в очередной раз помог:) Спасибо! |
Часовой пояс GMT +3, время: 18:49. |