2

I'm in a project where non-HTML savvy users will be changing site content in WYSIWYG editors. One page involves an unordered list with a good amount of content. I'd like to be able to toggle the content, but I've run into an issue.

Here's a jsfiddle recreating with my issue: http://jsfiddle.net/eKzbY/

And my 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');
});

You can toggle the content under "2" alright, but when you click "2.1" to toggle its content, it toggles both the content under it and the content under "2". I believe this is because clicking "2.1" hits both li's at the same time, toggling both. I'd give everything classes, but these users don't know HTML, so they'd likely struggle when adding more content.

I've been staring at this for too long. Anyone have a solution/better idea?

4

2 回答 2

6

问题是，您将“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');
});

我的一些旧菜单示例：

于 2013-06-24T19:21:42.447 回答
0

我找到了一个解决方案——基于 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>

于 2018-01-16T19:59:22.357 回答