Question

我有这个简单的HTML

<ul>
    <li class="item">
        <a href="javascript:void(0);">Parent</a>
        <ul class="sub-items">
            <li><a href="child-url.html">Child</a></li>
            <li><a href="child-url.html">Child</a></li>
        </ul>
    </li>
    <li class="item">
        <a href="javascript:void(0);">Parent</a>
        <ul class="sub-items">
            <li><a href="child-url.html">Child</a></li>
            <li><a href="child-url.html">Child</a></li>
        </ul>
    </li>
    <li class="item">
        <a href="javascript:void(0);">Parent</a>
        <ul class="sub-items">
            <li><a href="child-url.html">Child</a></li>
            <li><a href="child-url.html">Child</a></li>
        </ul>
    </li>
</ul>

这个简单的CSS

<style>
.sub-items {
    display: none;
}

.item:hover .sub-items {
    display: block;
}
</style>

这在台式机上有效，但是在移动设备上，当您触摸第二或第三父级时，会自动打开子级url。不使用JavaScript如何避免这种情况？

预先感谢

Answer 1

根据移动设备的悬停功能，它们可以作为click or active事件使用，因此更好的方法是.item:active .sub-items { display: block;}，我们可以通过媒体查询来使用

.sub-items {
    display: none;
}


@media only screen and (max-width:1240px) {
 .item:hover .sub-items {
    display: block;
}
}

@media only screen and (max-width:480px) {
  .item:active .sub-items {
    display: block;
    color:red
    
}
}

<ul>
    <li class="item">
        <a href="javascript:void(0);">Parent</a>
        <ul class="sub-items">
            <li><a href="child-url.html">Child</a></li>
            <li><a href="child-url.html">Child</a></li>
        </ul>
    </li>
    <li class="item">
        <a href="javascript:void(0);">Parent</a>
        <ul class="sub-items">
            <li><a href="child-url.html">Child</a></li>
            <li><a href="child-url.html">Child</a></li>
        </ul>
    </li>
    <li class="item">
        <a href="javascript:void(0);">Parent</a>
        <ul class="sub-items">
            <li><a href="child-url.html">Child</a></li>
            <li><a href="child-url.html">Child</a></li>
        </ul>
    </li>
</ul>

嵌套的UL-CSS响应菜单锚定问题

1 个答案: