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;
}​