Question

我试图为网站的移动版制作一个下拉菜单，但似乎无法弄清楚我做错了什么。我有我想要的初始位置（固定在屏幕的右上角）但是当你点击菜单标签时它什么也没做。这是我的JSFiddle

<div id="mobile-nav-wrapper">
    <ul id="mobile-nav">
        <li>Main Menu</li>
        <ul>
            <li>Home</li>
            <li>About</li>
            <li>Contact</li>
            <li>Register</li>
            <li>FAQs</li>
            <li>Facebook</li>
        </ul>
        <li>This Page</li>
        <ul>
            <li>Some Text</li>
            <li>Who?</li>
        </ul>
    </ul>
    <span id="mobile-nav-button" onclick="pullmenu('#mobile-nav-wrapper')">Menu</span
</div>

Answer 1

您的JavaScript功能不是全球性的。您已将JSFiddle配置为将其包装在onload处理程序中。它不能在该函数的范围之外访问。

不要使用内在事件属性，它们依赖于全局变量。而是Bind your event handlers with JS。

span不是互动元素。它不会出现在焦点顺序中，因此当您依赖与之交互的人时，会产生严重的可访问性影响。请改用按钮。如果您不喜欢它的样子，请申请CSS。

<button type="button" id="mobile-nav-button">Menu</button>

<script>
document.getElementById('mobile-nav-button').addEventListener('click', function (evt) {
   pullmenu('#mobile-nav-wrapper');
});

function pullmenu(etc) { etc }
</script>

Answer 2

<强>的JavaScript

<script>
function pullmenu(menu) {
var x = document.getElementById(menu).style;
if (x.top == "-15em") {x.top="0";}
else {x.top="-15em";}
}
</script>

HTML ：

<span id="mobile-nav-button" onclick="pullmenu('mobile-nav-wrapper')">Menu</span>

Example

如何更改此元素的样式属性？

2 个答案: