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'来切换：

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

现在，因为我只想隐藏第二个ul，如果点击了带有class'toggle-sub-menu'的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标签有效？

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

这不会使锚标签无法点击。

Answer 2

尝试使用

而不是返回false

e.preventDefault();

Answer 3

这听起来像是对纯CSS解决方案的需求。

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

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

这意味着，当li类toggle-sub-menu的某个类active显示其中的ul时，其余时间保持隐藏状态。这样，点击就没有问题了。此解决方案也假设您的li在点击并激活时会激活一个类。如果没有，那么您只需在点击时添加和删除active类。如果您需要进一步的帮助，请告诉我

Answer 4

这部分代码

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

将toggle-sub-menu的子项的onclick设置为false。当onclick for a-element返回false时，这将取消点击它的默认操作 - 从而使＆＃34;不可点击＆＃34;。

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

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

阻止孩子被点击，但保持包含a的功能

4 个答案: