Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 15.10.2020, 14:34
Аспирант
Отправить личное сообщение для Aruta Посмотреть профиль Найти все сообщения от Aruta
 
Регистрация: 08.07.2019
Сообщений: 83

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{
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 нужен скрипт.

Последний раз редактировалось Aruta, 15.10.2020 в 14:46.
Ответить с цитированием
  #2 (permalink)  
Старый 15.10.2020, 15:11
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 29,129

Aruta,
проверку делают на "не равно" !="block"
Ответить с цитированием
  #3 (permalink)  
Старый 15.10.2020, 15:15
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 29,129

Сообщение от Aruta
не понятно почему он не обрабатывает стиль уже заданный в css,
а где поиск свойства назначенного через css?
Цитата:
Свойство style оперирует только значением атрибута "style", без учёта CSS-каскада.
Вычисленные стили: getComputedStyle
Ответить с цитированием
  #4 (permalink)  
Старый 16.10.2020, 07:34
Аспирант
Отправить личное сообщение для Aruta Посмотреть профиль Найти все сообщения от Aruta
 
Регистрация: 08.07.2019
Сообщений: 83

рони,
в очередной раз помог Спасибо!
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
JS: работает на сервере, не работает из папки -majestic- Общие вопросы Javascript 2 02.08.2012 14:41
Не работает push! Динамическая вставка TSEH25 ExtJS 5 03.07.2012 13:00
jQyery функция странно работает! Midel Общие вопросы Javascript 4 08.04.2012 13:40
помогите найти ошибку (работает в IE но не работает в Firefox) Len4ik Javascript под браузер 2 11.05.2010 15:41
ajax запросы, работает на одних компах и не работает на других vtornik23 AJAX и COMET 2 22.03.2010 18:22