Question

我有一个项目，我无法修改HTML。在移动设备上，我必须有一个可打开的菜单，但是我必须在伪元素之前添加：所以点击不会激活链接，然后当菜单打开时（当它被聚焦时），转换时我移动：之前元素向上，因此用户可以单击链接。这适用于我的PC上的Chrome，也适用于我的Android手机，但不适用于iOS Safari或Chrome ...

这是：http://jsfiddle.net/59pp5o7t/1/

你知道问题是什么，或者对我的问题有更好的CSS解决方案吗？

谢谢！

<div class="portlet-body">
<div class="nav-menu nav-menu-style-">
    <ul class="layouts level-1">
        <li class="open selected "><a class="open selected " href="#"> Page 1</a>
        </li>
        <li class="open "><a class="open " href="#"> Page 2</a>
        </li>
        <li class="open "><a class="open " href="#"> Page 3</a>
        </li>
        <li class="open "><a class="open " href="#"> Page 4</a>
        </li>
    </ul>
</div>

Answer 1

如果您可以尝试将ontouchstart=""添加到<body>标记，则可能会有效。

我不太确定只有CSS的解决方案.. =（

编辑：看看这个...... LINK

更新了jsfiddle

<body ontouchstart="">
    <div class="portlet-body">
        <div class="nav-menu nav-menu-style-">
            <ul class="layouts level-1">
                <li class="open selected "><a class="open selected " href="#"> Page 1</a>
                </li>
                <li class="open "><a class="open " href="#"> Page 2</a>
                </li>
                <li class="open "><a class="open " href="#"> Page 3</a>
                </li>
                <li class="open "><a class="open " href="#"> Page 4</a>
                </li>
            </ul>
        </div>
    </div>
</body>

Answer 2

将 tabindex="0" 添加到您要关注的事物中——例如

<div tabindex="0">click me</div>

css：专注于在iOS Safari / Chrome中无效，在Android / PC Chrome上运行良好

2 个答案: