Question

只需一个简单的JavaScript即可在单击<a>时调整div的大小。似乎不适用于我的iPhone。

从一个简单的链接开始：

<a href="#" onfocus="menu()">MENU</a>

将div扩展为全屏并显示内容。在那个div里面，

<a href="#" onfocus="revert()">close</a>

和JS：

<script>
        var headerHeight = document.getElementById("header_container").clientHeight;
        function menu() {
            document.getElementById("nav_container").style = "display:block;";
            document.getElementById("header_container").style = "height:100%";
            document.getElementById("header").style = "height:100%";
        }
        function revert(){
            document.getElementById("nav_container").style = "display:none;";
            document.getElementById("header_container").style = "height:"+headerHeight+";";
            document.getElementById("header").style = "height:"+headerHeight+";";
        }
</script>

使用Firefox Dev Ed在桌面上完美运行。在响应式设计模式下，启用Simulate touch events。似乎无法在我的移动设备上运行： - （

我点击了按钮，没有任何反应。有什么想法吗？

Answer 1

当一个元素准备好接受键盘输入时，它会“聚焦”，我想你可能想要onclick。

此外，如果您没有链接到其他页面，则可能需要一个按钮。所以你的HTML看起来像这样：

<button onclick="menu()">MENU</button>
<button onclick="revert()">close</button>

这会奏效，但我们可以做得更好。如果您这样做，则需要在按钮之前定义 menu和revert个功能。这意味着您需要在DOM之前加载JavaScript，这意味着您的JavaScript无法引用DOM。

最好在之后加载你的JavaScript 加载所有DOM并将事件绑定到那里，如下所示：

function menu() { document.getElementById("msg").innerHTML = 'Showing menu'; } function revert(){ document.getElementById("msg").textContent = 'Not showing menu'; } // bind all events document.getElementById('open-menu-button').addEventListener('click', menu); document.getElementById('close-menu-button').addEventListener('click', revert);

<button id="open-menu-button">MENU</button> <button id="close-menu-button">close</button> <div id="msg"></div>

你会看到很多不良信息，告诉你在做这个之前你需要等待一些domloaded事件，或者把所有事情都包裹在$( document ).ready()中。只要您的JavaScript位于页面底部，那就完全是不真实的。

JavaScript - touchstart无法在iPhone上运行

1 个答案: