javascript - 阻止子 li 可点击，但保留包含 a 的功能

Question

我的导航如下所示:

<ul class="first-ul">
    <li class="toggle-sub-menu"><a href="link1.html">1
        <ul class="second-ul">
            <li><a href="link2.html">2</a></li>
            <li><a href="link3.html">3</a></li>
        </ul>
    </li>
</ul>

我的第二个 ul 被隐藏，并通过点击“切换子菜单”进行切换:

$('.toggle-sub-menu').click(function() {
    $(this).children('ul').slideToggle(200)
});

现在，因为我只想在单击带有“toggle-sub-menu”类的 li 时隐藏第二个 ul，而不是如果我添加了像子 li 或 a 这样的子项

$('.toggle-sub-menu').click(function() {
    $(this).children('ul').slideToggle(200)
}).children().click(function(e) {
  return false;
});

这可以防止 ul 在单击子项时隐藏，但是，它会使带有 href 的“a”不再可单击。

我试过了

$('.toggle-sub-menu').click(function() {
    $(this).children('ul').slideToggle(200)
}).children('ul').children('li').click(function(e) {
  return false;
});

但是，a 标签仍然不可点击。我该怎么做才能使 li 不可点击但 a 标签起作用？

Answer 1

您可以这样修改它:将类 list-element 添加到您的 lis

$('.toggle-sub-menu').click(function() {
    $(this).children('ul').slideToggle(200)
}).children('ul').children('li').click(function(e){
 if($(e.target).hasClass('list-element'))     
     return false;
});

这不会使 anchor 标记不可点击。