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”分配“click”事件。单击内部“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');
});

我的一些旧菜单示例：

Answer 2

我找到了一个解决方案 - 基于SpYk3HH的示例 - 即使<li>是超链接，也能提供所需的功能。

click事件绑定到li内创建的子元素，而不是li本身：

    $(document).ready(function() {
        $("ul > li > ul").hide();

        $("ul > li").each(function(i) {
            if ($(this).children("ul").length > 0) {
                $(this).css("cursor", "pointer").children("ul").before($("<sup class='toggler' />").text(" (+)"));
            }
            else {
                 $(this).css("cursor", "default");
            };
        });

        $("ul > li > .toggler").click(function(e) {
            e.stopPropagation();
            
            // was visible
            if (!$(this).siblings("ul").is(":visible")) {
                $(this).text(" (-)");
                $(this).parent("li").children("ul").show();
            } else {
                $(this).text(" (+)");
                $(this).parent("li").children("ul").hide();
            };
        });
    });

ul > li > ul {
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="descrip">
    <ul>
        <li>1
            <ul>
                <li>1.1</li>
                <li>1.2</li>
            </ul>
        </li>
        <li>2
            <ul>
                <li>2.1
                    <ul>
                        <li>2.1.1</li>
                        <li>2.1.2</li>
                    </ul>
                </li>
                <li>2.2</li>
            </ul>
        </li>
        <li>3</li>
    </ul>
</div>

使用jQuery切换无序列表项

2 个答案: