Div не исчезает, несмотря на то, что четко сказано (JavaScript)

Question

Div не исчезает, несмотря на то, что четко сказано (JavaScript)

echo "<div id=\"userinfo\"><p><strong>$username</strong></p><p>Bids: <strong>$bids</strong></div>
<script>

var usn = document.getElementById('userstuff');
menu = document.getElementById('userinfo');
if (usn)
{
usn.addEventListener('click',toggle_menu);
}function toggle_menu()
{
alert('clicked');
if (menu.style.display == '')
{
menu.style.display='block';
}
else if (menu.style.display == 'block')
{
menu.style.display='';
}
}

</script>";

Этот код работает с первого клика. По умолчанию отображаемое значение в меню установлено на «нет». При первом щелчке пользователь получает предупреждение «нажал», и меню становится видимым. Однако при большем количестве нажатий пользователь получает предупреждение «нажал», но меню не становится невидимым, а «скрытое» предупреждение не отображается.

-1

css php styles

Решение

Другие решения

Других решений пока нет …

Источник

Accepted Answer

Помни что = для назначение, использование == для сравнения. Другая проблема заключается в том, что проверка menu.style.display проверяет только встроенные стили узла, такие как:

<div style="display: none"></div>

Таким образом, если стиль не установлен, сравнение не удастся. '' сравнение вместо 'none' работает, потому что по умолчанию свойства являются пустыми строками, если не установлены, видно Вот.

Несколько других рекомендаций: всегда объявляйте ваши переменные с var предотвратить глобальное загрязнение окружающей среды многими глобальными переменными. Вот последний JavaScript:

var usn = document.getElementById('userstuff'),
menu = document.getElementById('userinfo');

if (usn) {
usn.addEventListener('click', toggle_menu);
}

function toggle_menu() {
alert('clicked');

if(menu.style.display == '' || menu.style.display == 'none') {
menu.style.display = 'block';
return;
} else if (menu.style.display == 'block') {
menu.style.display = 'none';
return;
}
}

3