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

此代码适用于第一次点击。默认情况下，菜单中的显示值设置为“无”＃39;。第一次点击，用户会收到提醒，点击＆＃39;菜单变得可见。但是，点击次数越多，系统就会提醒用户点击“＃39;但菜单不会变得隐形，而且隐藏了＃39;警报没有显示。

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

尽管被明确告知（javascript），Div并没有消失

1 个答案: