ios - ul > li :hover . 子菜单 { 显示 : block; } - To get working on iPad?

Question

<li class="menu-item menu-item-has-children"><a href="/us/">About Us</a>
 <ul class="sub-menu">
   <li class="menu-item"><a href="meet-team/">Meet the team</a></li>
   <li class="menu-item"><a href="/history/">Our History</a></li>
 </ul>
</li>

上面有一个 CSS 解决方案来显示在桌面上工作正常的 .sub-menu:

.ul li:hover .sub-menu { display:block; }
.sub-menu { display:none; }

但是，由于父级 li 有链接，在 IOS 设备上单击父级链接以显示子菜单时，页面会加载父级链接，而错过子菜单。

理想情况下，在 Ipad 上，我想点击一次打开子菜单，然后再次点击同一链接转到父链接。或在显示后点击子菜单项。

Answer 1

你可以试试在<a>之前放置伪元素并在移动设备上点击删除它们:
HTML:

<ul>
<li class="menu-item menu-item-has-children"><a href="/us/">About Us</a>
 <ul class="sub-menu">
   <li class="menu-item"><a href="meet-team/">Meet the team</a></li>
   <li class="menu-item"><a href="/history/">Our History</a></li>
 </ul>
</li>
</ul>

CSS:

li:hover .sub-menu { display:block; }
.sub-menu { display:none; }
@media only screen and (max-device-width : 1024px){
    li.menu-item-has-children { position:relative; }
    li.menu-item-has-children:before{
        content:'';
        position:absolute;
        top:0;
        left:0;
        right:0;
        bottom:0;
        z-index:100;
    }
    li.menu-item-has-children.clicked:before{display:none;}
}

JQ:

$(document).on('click', '.menu-item.menu-item-has-children', function(){
    if (window.innerWidth<1024){
        $(this).toggleClass('clicked')
    }
})

DEMO