使用jQuery切换无序列表项

Question

我正处于一个项目中,非HTML精明的用户将在WYSIWYG编辑器中更改网站内容.一页涉及具有大量内容的无序列表.我希望能够切换内容,但我遇到了一个问题.

这是一个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

问题是,你将"点击"事件分配给每个"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/