Question

我正在寻找一种方法，或者简单的“你必须使用JavaScript。”

是否可以为移动设备制作纯CSS下拉菜单，还是必须使用JavaScript？

我尝试使用：focus伪，但我无法点击链接，即使菜单打开（它在点击链接之前关闭）。：active伪甚至没有中途工作。

这样做有一些技巧，还是我需要使用JavaScript？

Answer 1

是的，:checked伪类适用于all major mobile browsers。

您可以采用以下方式：

<input class="dropdowninput" type="checkbox" id="dropdownbox1"/>
<div class="dropdownbox">
    <label for="dropdownbox1">Open dropdown</label>
    <ul class="dropdown">
        <li>...</li><li>etc</li>
    </ul>
</div>

使用CSS：

.dropdowninput, .dropdown {display:none;}
.dropdowninput:checked + .dropdownbox .dropdown {display:block;}

这样，您的下拉列表ul只会在选中复选框时显示。缺点可能是当下拉列表打开时，只有在用户手动关闭时它才会关闭。

您也可以使用:hover，这可能是您正在寻找的效果：

<div class="dropdown">
Open
    <ul>
        <li>asdf</li>
        <li>foo</li>
    </ul>
  </div>

使用CSS：

.dropdown ul {display:none;}
.dropdown:hover ul {display:block;}

this简单的jsbin适用于我在Android上的Chrome浏览器。

这是有效的，因为嵌套的ul在单击下拉列表中的任何内容时仍然悬停，而“触发”标签元素在单击内部时不再聚焦。此外，由于移动浏览器的工作原理，:active可能无法正常工作，但实际上我并不是真的知道这一点。

移动设备的下拉菜单

1 个答案: