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菜单在桌面上工作正常：

.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

ul＆gt; li：hover .sub-menu {display：block; } - 要在iPad上工作？

1 个答案: