html - CSS 下拉菜单 - 移动支持

Question

我使用 CSS 构建了这个相对简单的下拉菜单。我担心是否所有设备都以相同的方式处理触摸事件——即所有触摸设备是否都有一个在触摸后移动的光标？我既没有时间也没有资源来测试这个，所以我最好的选择是在这里问。

Here是一个例子，我想问一下这种激活下拉菜单的方法是否适用于大多数移动设备？

HTML

<ul>
    <li class="userpanel dropdown last-vertical">   <span>User Name</span>

        <ul class="userpanel dropdown-body">
            <li><a class="dropdown-item" href="/users/view">
                            <i class="fa fa-lg fa-user"></i> Profile
                        </a>

            </li>
            <li><a class="dropdown-item" href="/users/settings">
                            <i class="fa fa-lg fa-cog"></i> Settings
                        </a>

            </li>
            <li>
                <form action="/users/logout" method="POST">
                    <button type="submit" class="dropdown-item">    <i class="fa fa-lg fa-sign-out"></i> Log out</button>
                </form>
            </li>
        </ul>
    </li>
</ul>

CSS

ul {
    margin: 0;
    padding: 0;
}
.userpanel.dropdown {
    display: inline-block;
    position: relative;
    padding: 1.5rem;
    z-index: 10;
    border: solid transparent;
    border-width: 1px 1px 0 1px;
    cursor: default;
}
.userpanel.dropdown span {
    display: inline-block;
    vertical-align: middle;
}
.userpanel.dropdown .dropdown-item {
    display: block;
    text-align: left;
    color: black;
    border: none;
    background: none;
    padding: 1rem;
    margin: 0;
    width: 100%;
    box-sizing: border-box;
}
.userpanel.dropdown .dropdown-item:hover {
    background-color: lightgray;
}
.userpanel.dropdown-body li {
    margin:0;
}
.userpanel.dropdown:hover {
    background-color: #f1f1f1;
    border-color: lightgray;
    color: black;
}
.userpanel.dropdown:hover .dropdown-body {
    display: block;
}
.userpanel.dropdown-body {
    position: absolute;
    top: 4rem;
    left: 0;
    display: none;
    width: 100%;
    z-index: 10;
    border: solid lightgray;
    border-width: 0 1px 1px 1px;
    background: #f1f1f1;
}

Answer 1

根据 W3 文档 (http://www.w3.org/TR/CSS2/selector.html#dynamic-pseudo-classes)，它可能有问题。您的方法强烈依赖于 :hover 伪类来激活下拉菜单。 :hover 伪类(或事件)依赖于外围设备(如鼠标或触控板)，它能够区分指向某物(又名悬停)和点击某物。

在移动开发中，您会看到主要的 UI 框架在显示下拉菜单时将 :hover 事件替换为 click 事件(请参阅 Bootstrap 导航栏).在触摸屏设备上，点击而不是悬停在某物上相对容易，无论手机用户的经验如何。