html - 嵌套无序菜单点击 Ipad

Question

我有一个嵌套菜单列表，如下所示。目前，当有人单击主菜单项时，它会跟随该链接。我想知道是否有办法让触摸屏在不遵循主菜单项的情况下显示下拉菜单？将鼠标悬停在主菜单项上时，子菜单的样式已设置为不显示

• 主菜单项
  • 子菜单项

Answer 1

我希望你正在尝试按照这个演示中提到的那样做：http: //jsfiddle.net/akhurshid/rvy6U/

注意：hover触摸设备中不存在tap事件，而触摸设备中存在事件。tap并且click事件的行为相同。

jQuery

$('#accordion li').click(function(){

    if($('.sub').css('display') == 'none') {
        $(this).find('a').next('.sub').stop().slideToggle('slow')
    } else {
        $(this).find('a').next('.sub').stop().slideToggle('slow')    
    }

});​

HTML

<ul id="accordion">
    <li><a href="#">Section 1</a>
        <ul class="sub">
            <li>Mauris mauris ante</li> 
            <li>blandit et, ultrices a</li>
        </ul>
    </li>

    <li><a href="#">Section 2</a>
        <ul class="sub">
            <li>Mauris mauris ante</li> 
            <li>blandit et, ultrices a</li>
        </ul>
    </li>
</ul>  

CSS

.sub {
    display: none;
}​

Answer 2

您可以使用 jQuery onClick() 来显示我认为的子菜单。

您当前的悬停功能仍然适用于台式计算机，并且 onClick() 也适用于触摸屏设备和台式计算机。