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小提琴：
https://jsfiddle.net/njm9Lz4e/#&togetherjs=PRGpaib46U

Answer 1

通過打開LI元素，您可以暴露其他LI元素。
單擊該內部LI - 單擊將傳播到導致您的問題的父LI

防止點擊傳播到父元素，如：

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

jsFiddle例子

Answer 2

使用event.target進行li點擊，它運行正常。

 $('.tree-toggle').click(function() { $(this).parent().children('ul.tree').toggle(1); $(this).parent().toggleClass('active'); }); $('.aside-list li').click(function(event) { $(event.target).children('label').children('i').toggleClass('fa-plus-square fa-minus-square') $(event.target).children('label').children('i').toggleClass('fa-caret-up fa-caret-down') }); 

 .tree { display: none } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <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 -->