jQuery 列表项图标与子元素切换

Question

我有一个多级侧边栏导航树，里面有很棒的字体图标。我希望图标在展开时从加号变为减号，在折叠时返回加号。单击一个 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 示例