Почему Javascript срабатывает на второй клик, а на первый не срабатывает?

Question

[Uzumeti]

Есть простенький код:

const btn = document.querySelector(".menu88");
const content = document.querySelector(".submenu");
btn.addEventListener("click", btnClick);
function btnClick() 


{
	let x = document.getElementsByClassName('submenu')[0];
      if (x.style.display == "none"){
	  x.style.display = "block";
	  } else {
	 x.style.display = "none"}
    };

Он должен открывать и закрывать выпадающее подменю в wordpress. Пока я делаю это в редакторе кода - всё работает. Когда переношу на сайт - срабатывает только по второму клику. Первый клик ничего (в моем случае меняет цвет строчки с пунктом). Второй клик - выпадает подменю. Третий клик - подменю скрывается. Четвертый клик - опять выпадает. Нужно, чтобы сразу после загрузки странички подменю выпадало по клику при первом нажатии.

Догадываюсь, что проблема появляется из-за того, что первый клик запускает сам обработчик или что-то такое и переписывает какой-то пустой стиль. Но не соображу как это исправить)

Comments

[Rsa97]

Вопрос на засыпку - чему равняется x.style.display при первом вызове функции?

[Uzumeti]

Rsa97, Наверное none, поскольку объект-то скрыт изначально :)

[Rsa97]

Uzumeti, А вы не гадайте. Добавьте в код console.log(x.style.display) и посмотрите.

[Uzumeti]

Rsa97, Большое Вам спасибо за подсказки! Я примерно понимал в чём беда, но не знал, как это всё прощупать

Answer 1

[Вадим]

Ванга клуб на этой неделе объявляю открытым.

Потому что по умолчанию в разметке(которую Вы решили любезно нам не предоставлять) у Вас у .submenu нет инлайн стилей, а скрыт он через css. Поэтому на первый клик он задаёт style.display = none, из-за того что x.style.display === "" а не 'none' то есть идёт по ветке else, а потом уже работает как "предполагалось".

Если зададите инлайн стиль style="display: none", то будет работать с первого раза.
То есть в разметке сразу должно быть<element style="display: none">

Ну а лучше отказаться от diplay: none и использовать атрибут hidden или скрывать\показывать через css классы.

Comments

[Uzumeti]

Спасибо! Заработало в таком виде)

const btn = document.querySelector(".menu88");
const content = document.querySelector(".sub-menu");
btn.addEventListener("click", btnClick);
function btnClick() 




{
	let x = document.getElementsByClassName('sub-menu')[0];
	
      if (x.style.display == "block"){
	  x.style.display = "none";
	  } else {
	 x.style.display = "block"}
    };