Javascript 阻止子li被单击，但保留包含的功能

我有一个如下所示的导航：

<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”的li，而不是任何像我添加的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标记可以工作？

请尝试使用

e.preventDefault();

---

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

e.preventDefault();

---

您可以这样修改它：将class

列表元素

添加到您的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;
});

---

这不会使锚定标记不可读取。

您可以这样修改它：将class

列表元素添加到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;
});

这不会使锚定标签不可点击。
这听起来像是需要一个纯CSS解决方案

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

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

这意味着当带有class
toggle子菜单的
li
有一个class
active
时，在其内部显示
ul
，否则将其隐藏。这样，在点击中就没有问题了。此外，此解决方案假定您的
li
在单击某个类时，该类处于活动状态。如果没有，那么您只需在单击时向li添加和删除
活动的
类即可。如果您需要进一步帮助，请告诉我这听起来像是需要一个纯CSS解决方案

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

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

这意味着当带有class
toggle子菜单的
li
有一个class
active
时，在其内部显示
ul
，否则将其隐藏。这样，在点击中就没有问题了。此外，此解决方案假定您的
li
在单击某个类时，该类处于活动状态。如果没有，那么您只需在单击时向li添加和删除
活动的
类即可。如果您需要进一步帮助，请告诉我
这部分代码

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

将切换子菜单子菜单的onclick设置为false。当a元素的onclick返回false时，将取消单击该元素的默认操作，从而使“不可单击”

如果希望链接在单击时仍能导航用户，则应确保其onclick代码返回true或手动重定向用户。也就是说，试着写作

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

这部分代码

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

将切换子菜单子菜单的onclick设置为false。当a元素的onclick返回false时，将取消单击该元素的默认操作，从而使“不可单击”

如果希望链接在单击时仍能导航用户，则应确保其onclick代码返回true或手动重定向用户。也就是说，试着写作

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

然后尝试添加样式指针事件：无；对孩子们非常感谢你的回答，但是，@Yogita088是对的，这也不会给我带来正确的结果-我还听说e.preventDefault（）不应该再使用了，是真的吗？@HyukchanKwon很遗憾，我需要一个在IE8中有效的选项，因此不支持指针事件。这与此相同。然后尝试添加样式指针事件：无；孩子们非常感谢你的回答，但是，@Yogita088是对的，这也不会给我带来正确的结果-我还听说e.preventDefault（）不应该再使用了，是真的吗？@Hyukhankwon很遗憾，我需要一个在IE8中工作的选项，所以指针事件不受支持。你的代码将无法工作，因为。单击（函数（e）{第二次点击函数的一部分（语法错误）。很抱歉，这是一个打字错误。谢谢你让我知道。谢谢，这很好！现在我唯一的问题是，当a工作时，他们也会在点击时隐藏ul-但我应该能够自己解决这个问题。@Yogita088没问题。也许可以尝试使用event.stopPropagation（）？由于.click（函数（e）{第二个click函数中的部分（语法错误），代码将无法工作。抱歉，这是一个打字错误。谢谢你让我知道。谢谢，这很好！现在我唯一的问题是，虽然a可以工作，但他们也会在单击时隐藏ul-但我应该能够自己解决这个问题。@Yogita088没问题。也许可以尝试使用event.stopPropagation（）？谢谢，但遗憾的是，基于css的解决方案不是我想要的-非常感谢您花时间帮助我！因为您的OP标记了css，我不得不给出我的解决方案。我不明白您接受的答案如何解决您的问题：）哦，我对css标签感到非常抱歉，我原本计划加入我的css，但后来我意识到它不会给我的问题添加任何内容，并删除了它，但删除了标签。标记的答案确实解决了我的一些问题，使内部li不可点击，但这是孩子a。谢谢你，但基于css的解决方案不是我想要的-谢谢你非常感谢你花时间帮助我！因为你的OP标签是css，我不得不给出我的解决方案。我不明白你接受的答案是如何解决你的问题的：）哦，我对css标签感到非常抱歉，我原本计划加入我的css，但后来我意识到它不会给我的问题添加任何内容，并删除了它，但删除了标签。标记的答案确实解决了我的一些问题，使内部li不可点击，但它是子a。