Вопрос по html, javascript, css, toggle – Переключатель стилей Javascript не работает при первом нажатии

0

Я делаю это маленькое html-приложение с боковым меню, которое появляется при нажатии. Он работает нормально, за исключением того, что он начинает работать только после второго щелчка. При первом нажатии ничего не происходит.

CSS:

#menubalk{
   margin-left: -260px;
}

HTML:

<div id="menubutton">
   <img src="design/images/menu.png" id="menu" onclick="toggle()" alt=""/>
</div>

<div id="menubalk">
   <h5>Menu</h5>
</div>

Javascript:

function toggle () {
  var el = document.getElementById("menubalk");
  var kop = document.getElementById("kop");
  var pag = document.getElementById("pagina");

  if ( el.style.marginLeft=="-260px" ) {
     el.style.marginLeft="0px";
     kop.style.marginLeft="260px";
     pag.style.marginLeft="260px";
  } else {
     el.style.marginLeft="-260px";
     kop.style.marginLeft="0px";
     pag.style.marginLeft="0px";
  }
}

Я думаю, что мне, возможно, придется установить поле где-то в javascript, но я не могу понять это.

Вся помощь очень ценится!

Потому что по первому щелчку ни один из операторов в вашем if-else не совпадает. Когда вы щелкаете в первый раз, вы вызываете toggle, и один из них устанавливается, затем, так как теперь это один из случаев if-then, он начинает работать .. Kemal Emin
Попробуйте добавить console.log в блоки if и else. Узнайте, какой из них идет первым щелчком мыши и проверьте код CSS в то время. Вы поймете. geniuscarrier

Ваш Ответ

4   ответа
1

element.style искать только встроенный стиль, чтобы получить актуальный стиль, который вы можете использоватьgetComputedStyle

то есть
if ( window.getComputedStyle(el).marginLeft=="-260px" ) {...

Ссылка:https://developer.mozilla.org/en-US/docs/DOM/window.getComputedStyle

Примечание: для IE это работает только для IE9 или выше.

2

style.marginLeft смотрит на ваши встроенные стили. Поскольку вы не определили встроенный стиль изначальноstyle.marginLeft не определено

Чтобы это исправить, вы можете просто поменять оператор if / else:

if ( el.style.marginLeft=="0px" )
Юп, изменив заявление, сделал это. Кажется глупым сейчас. Спасибо за быстрый ответ! Jorgos Coenen
1

С этой линией

if(el.style.marginLeft=="-260px") {

Вы проверяете, является ли встроенный стиль элемента конкретным значением. Тем не менее, этот стиль установлен в CSS. Я рекомендую добавить className в меню, чтобы расширить его. Вы можете проверить это имя класса и соответственно добавить / удалить его:

  if ( el.className == "expanded" ) {
     el.className = "";
  } else {
     el.className = "expanded";
  }

С этим дополнением к CSS:

#menubalk.expanded {
    margin-left:0;
}
+1 Я ответил с быстрым исправлением, но классы предложили бы более чистую реализацию. Обратите внимание на орфографию: className Christophe
0

что где-то устанавливаете стиль меню в JavaScript, но я бы порекомендовал сделать это как часть вашей инициализации, а не устанавливать левое поле с помощью CSS.

Я подозреваю (трудно увидеть без примера), что при первом щелчке JavaScript переходит прямо к условию else, потому что он не распознает, что вы установили поле в CSS (или в другом месте). Затем по второму щелчку JavaScript был использован для установки левого поля, чтобы он мог читать его и выполнять соответственно.

Похожие вопросы