php - 尽管明确告知 Div 不会消失(javascript)

Question

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>";

此代码在第一次点击时起作用。默认情况下，菜单中的显示值设置为“无”。第一次点击时，用户会收到“已点击”的提示，菜单会变得可见。然而，在更多点击时，用户会收到“已点击”提醒，但菜单不会变得不可见，“隐藏”提醒也不会显示。

Answer 1

记住=是赋值，比较用==。另一个问题是检查 menu.style.display 只检查节点的内联样式，例如:

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

因此，如果未设置样式，比较将失败。 '' 比较而不是 'none' 有效，因为默认情况下，如果未设置，属性为空字符串，参见 here .

其他一些建议:始终使用 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;
    }
}