javascript - 带有子元素的 jQuery 列表项图标切换

Question

我有一个多级侧边栏导航树，在 li 元素中有很棒的字体图标。我希望一个图标在展开时从加号变为减号，在折叠时又回到加号。单击一个 li 元素不应影响另一个 li 元素的状态。

这是我正在使用的 jQuery 脚本:

$('.tree-toggle').click(function () {
        $(this).parent().children('ul.tree').toggle(1);
        $(this).parent().toggleClass('active');
    });

    $('.aside-list li').click(function(){
        $(this).children('label').children('i').toggleClass('fa-plus-square fa-minus-square')
        $(this).children('label').children('i').toggleClass('fa-caret-up fa-caret-down')
    });

这是我的 HTML 结构:

<div class="well">
        <ul class="nav nav-list aside-list">
            <li>
            <label class="tree-toggle nav-header">Category <i class="fa fa-caret-down"></i></label>
                <ul class="nav nav-list tree">
                    <li><label class="tree-toggle nav-header"><i class="fa fa-plus-square"></i> In id sodales leo</label>
                        <ul class="nav nav-list tree">
                            <li><label class="tree-toggle nav-header"><i class="fa fa-plus-square"></i> Tortor masa</label>
                                <ul class="nav nav-list tree">
                                <li><a href="#">Lorem ipsum dolor sit amet</a></li>
                                <li><a href="#">Adipiscing elit</a></li>
                                    <li><label class="tree-toggle nav-header"><i class="fa fa-plus-square"></i> Integro commodo</label>
                                        <ul class="nav nav-list tree">
                                            <li><a href="#">Colors</a></li>
                                            <li><a href="#">Sizes</a></li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul><!-- end aside-list -->
    </div><!-- end well -->

目前该功能存在故障，因为单击一项会更改列表中所有元素的图标状态。

我也为代码制作了一个 JS Fiddle:
https://jsfiddle.net/njm9Lz4e/#&togetherjs=PRGpaib46U

Answer 1

通过打开一个 LI 元素，您可以公开其他 LI 元素。
单击该内部 LI - 单击将传播到导致您的问题的父 LI，因此

防止点击传播到父元素，如:

$('.aside-list li').click(function(evt) {
   evt.stopPropagation();

jsFiddle example