jquery - 单击 LI，显示/隐藏 UL

Question

我正在尝试进行切换导航，但我似乎无法弄清楚我的代码出了什么问题。这非常困惑，因为我使用的是 CMS，它创建了列表菜单中使用的 id 和类。理想情况下，我会给列表起一个更好的名称。

我已将代码发布到 https://jsfiddle.net/chachacallis/amfmsors/1/

$(document).ready(function () {
    $('ul ul').hide();
    $('ul li span.section_title a').removeAttr("href");
    $('ul li span.section_title > a').click(function (event) {
        $('ul ul').hide('slow');
        $(this).parent().find('ul').toggle('slow');
    });
});

已更新 如果我不希望对主页和其他没有子菜单的项目禁用默认操作怎么办？如何将其添加到现有代码中？

Answer 1

首先，你的 jsFiddle 不包含 jQuery，所以它什么也没做。其次，从 a 元素中删除 href 属性会使它们不可点击。如果您想停止点击时遵循的链接操作，您需要在引发的事件上使用 preventDefault() 。最后，你的 DOM 遍历不正确。您需要使用 closest('li').find()，因为 a 的 parent() 是一个 span 不包含 ul。将所有这些付诸实践，您会得到如下结果:

$(document).ready(function () {
    $('ul ul').hide();
    $('ul li span.section_title > a').click(function (e) {
        e.preventDefault();
        $('ul ul').hide('slow');
        $(this).closest('li').find('ul').toggle('slow');
    });
});

Working fiddle