移动设备上的多级菜单，链接内的图标上带有 touchstart

Question

有一个多级菜单，每个<li> 都包含<a>。在桌面上，子菜单用:hover 打开，一切都很好。 在移动设备上，我想通过单击字体真棒插入符号图标来替换:hover，单击以打开子菜单。但是在下面的html中<a> 捕获 touchstart。

如何捕获点击链接内的图标并使链接的其余部分仍可点击？

        $(document).ready(function () {
            $('.hover').bind('touchstart', function (e) {
                e.preventDefault();
                $(this).parent().toggleClass('hover_effect');
            });
        });

这是菜单结构：

<li class="hover"><a href="/link1">WordPress Development<i class="fa fa-caret-down hover" aria-hidden="true"></i></a>
    <ul>
        <li><a href="/link2">Themes</a></li>
        <li><a href="/link3">Plugins</a></li>
        <li class="hover"><a href="/link4">Custom Post Types<i class="fa fa-caret-down hover" aria-hidden="true"></i></a>
            <ul>
                <li class="hover"><a href="/link5">Portfolios</a></li>
                <li class="hover"><a href="/link6">Testimonials</a></li>
            </ul>
        </li>
        <li><a href="/link7">Options</a></li>
    </ul>
</li>

Answer 1

所以你需要的是事件或函数，它不会在点击的链接上起作用，而是在你的字体图标上起作用。而且因为在你的导航中你只有一个标签，你不需要提供它的id或类，只需将“.hover”替换为“.hover i”：

`

$(document).ready(function () {
   $('.hover i').bind('touchstart', function (e) {
     e.preventDefault();
     $(this).parent().toggleClass('hover_effect');
  });
});

`