javascript - 触摸隐藏菜单适用于平板电脑，不适用于任何 iOS 设备

Question

一段时间以来，我一直在尝试让我的 Wordpress 主题在 iOS 上运行。但似乎缺少某些东西，或者我不了解 iOS 设备的工作原理导致我盲目地研究这个。

我试图在每次点击另一个 div 时显示一个菜单(本质上是一个 div)。我当前的设置适用于 Android，但不适用于 iOS。

<script>

var $v = document.getElementsByClassName("midbar")[0];     //the div that activates the appearance of the menu.
var $x = document.getElementsByClassName("menubar")[0];     //the menu that has it's opacity set to 0 at the start.

$v.addEventListener("mouseup", TapEvent, false);     //I used mouseup, touchend works as well.

function TapEvent(event) {

    if ($x.style.opacity == 0) {

        $x.style.height = "300px";
        $x.style.opacity = "1";
        $x.style.overflow-y = "auto";

        }

        else {

        $x.style.height = "0px";
        $x.style.opacity = "0";
        $x.style.overflow-y = "hidden";

        }

    event.preventDefault();
    return false;
}

</script>

这里是临时站点:itdctest3.comule.com

当屏幕尺寸低于 700px 时，主题将转换为移动模式。应该显示隐藏菜单的 div 是页面顶部网站标题右侧的黑色空间。

任何关于研究内容的帮助，甚至只是线索，我们都将不胜感激。提前谢谢大家。

Answer 1

我找到了一个可行的解决方案，但我仍然不明白为什么我在顶部发布的内容适用于 Android 而不是 iOS。

我所要做的就是将激活另一个 div 的 div 包装在一个带有 onclick="void(0)"的 span 中。

不知何故，它现在可以工作了。但我仍然必须对其进行测试。

感谢所有回答的人。