Question

我的CSS菜单悬停在iPad上无效。环顾四周，我在SO上找到了这个answer。为了触发悬停，我在顶级链接上设置了event.preventDefault，效果很好。但是，这适用于菜单下的所有链接，这意味着您无法浏览网站。

我创建了一个jsFiddle。

如何才能使任何事件具有类.menu-item-has-children的事件被阻止，但对于该类下的任何其他<a></a>是有效的。

不幸/恼人地无法编辑HTML标记

这是我的代码：

HTML

<nav id="top-menu">
<ul>
    <li class="menu-item-has-children"><a>Link 1</a>
        <ul>
            <li><a href="http://www.google.co.uk">Google</a></li>
            <li class="menu-item-has-children"><a href="http://www.google.co.uk">Google</a>
                <ul>
                   <li><a href="#">Google 1</a></li>
                   <li><a href="#">Google 1</a></li>
                   <li><a href="#">Google 1</a></li>
                   <li><a href="#">Google 1</a></li>
                </ul>
            </li>
            <li><a href="#">Google</a></li>
            <li><a href="#">Google</a></li>
        </ul>
    </li>
    <li class="menu-item-has-children"><a>Link 2</a>
       <ul>
            <li><a href="#">Google</a></li>
            <li><a href="#">Google</a></li>
            <li><a href="#">Google</a></li>
            <li><a href="#">Google</a></li>
        </ul>
    </li>
    <li class="menu-item-has-children"><a>Link 3</a>
        <ul>
            <li><a href="#">Google</a></li>
            <li><a href="#">Google</a></li>
            <li><a href="#">Google</a></li>
            <li><a href="#">Google</a></li>
        </ul>
    </li>
    <li class="menu-item-has-children"><a>Link 4</a>
        <ul>
            <li><a href="#">Google</a></li>
            <li><a href="#">Google</a></li>
            <li><a href="#">Google</a></li>
            <li><a href="#">Google</a></li>
        </ul>
    </li>
</ul>

jQuery：

$("#top-menu .menu-item-has-children a").click(function( event ) {
    event.preventDefault();
    console.log('clicked');
});

Answer 1

添加>（CSS Direct Descendant Selector）：

$("#top-menu .menu-item-has-children > a").click(function( event ) {
    event.preventDefault();
    console.log('clicked');
});

仅选择<a/>的直接后代的menu-item-has-children个标记。

例如，在此代码块中，它选择“链接2”锚点，但不选择任何“谷歌”锚点：

<li class="menu-item-has-children"><a>Link 2</a>
   <ul>
        <li><a href="#">Google</a></li>
        <li><a href="#">Google</a></li>
        <li><a href="#">Google</a></li>
        <li><a href="#">Google</a></li>
    </ul>
</li>

停止将event.preventDefault应用于所有链接

1 个答案: