触摸适用于平板电脑的隐藏菜单,而不是任何iOS设备

时间:2016-07-12 09:34:50

标签: javascript android ios css wordpress

一直试图让我的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

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

任何帮助,甚至只是引导研究的内容都将非常感激。先谢谢你们。

1 个答案:

答案 0 :(得分:1)

我找到了一个有效的解决方案,但我仍然不明白为什么我发布的内容最适合Android而非iOS。

我所要做的就是用一个onclick =&#34; void(0)&#34;来包裹激活另一个div的div。在里面。

不知何故,它现在有效。但我还是要测试它的地狱。

感谢所有回答的人。