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

Stop child li from being clickable but keep function of contained a

本文关键字：保留 包含 功能 li      更新时间：2023-09-26

我有一个看起来像这样的导航：

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

现在，因为我只想在单击带有类"切换子菜单"的 li 时隐藏第二个 ul，而不是如果任何孩子喜欢孩子 li 或我添加的

$('.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 标签正常工作？

您可以像这样修改它： 将类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;
});

这不会使锚标记无法单击。

不要返回 false，而是尝试使用

e.preventDefault();

代码的这一部分

.children().click(function(e) {
  return false;
})

将切换子菜单的子菜单的点击次数设置为 false。当 onclick for a 元素返回 false 时，这将取消单击它的默认操作 - 从而使"不可点击"。

如果您希望链接在单击时仍导航用户，则应确保其 onclick-code 返回 true 或以某种方式手动重定向用户。 即尝试写作

.children().click(function(e) {
  return true;
})

这听起来像是需要一个纯粹的CSS解决方案。

li.toggle-sub-menu ul{
  display:block;
}
li.toggle-sub-menu.active ul{
  display:none;
}

这意味着当具有类toggle-sub-menu的li具有类active显示其中的ul时，请将其隐藏。这样点击就没有问题了。此外，此解决方案假设您的li在单击类时使其处于活动状态并且处于活动状态。如果没有，那么您只需要在单击时添加和删除 li 的active类。如果您需要进一步的帮助，请告诉我

相关文章：