jquery - 使用 jQuery 切换无序列表项

Question

我正在参与一个项目，不懂 HTML 的用户将在所见即所得编辑器中更改网站内容。一页涉及一个包含大量内容的无序列表。我希望能够切换内容，但遇到了问题。

这是一个针对我的问题重新创建的 jsfiddle:http://jsfiddle.net/eKzbY/

还有我的 JavaScript:

$(document).ready(function() {
    $('.descrip ul ul').hide();
    $('.descrip ul li').click(function() {
        $(this).children('.subLink').toggle('slow');
    });
    $('.descrip li:has(ul)').addClass('myLink');
    $('.descrip ul ul').addClass('subLink');
});

您可以切换“2”下的内容，但是当您单击“2.1”切换其内容时，它会切换其下的内容和“2”下的内容。我相信这是因为单击“2.1”会同时点击两个 li，从而切换两者。我会给所有内容类，但这些用户不了解 HTML，因此他们在添加更多内容时可能会遇到困难。

我已经盯着这个看了太久了。有人有解决方案/更好的主意吗？

Answer 1

问题是，您将“click”事件分配给每个“li”。当点击内部的“li”时，父级也会被点击。您可以使用 jQuery 的 stopPropagation 来防止这种情况发生。 .

使用e.stopPropagation();

像这样:

$(document).ready(function() {
    $('.descrip ul ul').hide();
    $('.descrip ul li').click(function(e) {  // inserted callback param "e" meaning "event"
        e.stopPropagation(); // stop click from bubbling up
        $(this).children('.subLink').toggle('slow');
    });
    $('.descrip li:has(ul)').addClass('myLink');
    $('.descrip ul ul').addClass('subLink');
});

我的一些旧菜单示例:

• http://jsfiddle.net/SpYk3/QapjP/36/ (SO)
• http://jsfiddle.net/SpYk3/9Hkxs/22/