jquery - 点击链接jquery

Question

我在 jquery（家庭作业）上制作了一个示例“树视图”插件，但我遇到了一些问题：这里是代码：

(function($){
    $.fn.TreeView = function() {
        $("ul li").children().css("display","none");

        $("li").on("click", function() {
                $(this).siblings().find("*").css("display", "none");    
                $(this).children().css("display", "block");
                $(this).children().children().css("display", "block");
                console.log($(this).children()[0]);

        });

        $(this).on("mouseover", function() {
            $(".hover").removeClass("hover");
            $(this).addClass("hover");
        });

        $(this).on("mouseout", function() {
            $(this).removeClass("hover");   
        });

        $("li").css("cursor", "pointer");

        return this;    
    };  
}(jQuery));

部分示例html：

<ul id="example-ul">
        <li> Item 1 
        </li>
        <li> Item 2 
            <ul>
                <li> Item 2.1 </li>
                <li> Item 2.2  
                    <ul>
                        <li> Item 2.2.1 </li>
                        <li> Item 2.2.2 
                            <ul>
                                <li> Item 2.2.2.1 </li>
                                <li> Item 2.2.2.2 
                                    <ul id="asd">
                                        <li> Item 2.2.2.2.1 </li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
        <li>
        Item 3 

            <ul>
                <li> Item 3.1
                    <ul>
                        <li> Item 3.3.1 </li>
                    </ul>
                </li>
                <li> Item 3.2 </li>
            </ul>
        </li>
    </ul>
    <!-- scripts -->

    <script src="js/jquery.js"></script>
    <script src="js/script.js"></script>
    <script>
        //Example
        $("#example-ul").TreeView();    
    </script>

所以我面临的问题是点击时“链接”，我只想显示子元素（在控制台上），但是每次点击我都会得到“以前的”子元素和新的 - 我只想可视化当前的子元素。

Answer 1

我认为您正在寻找的是停止事件的传播。这可以通过将以下代码添加到事件处理程序来完成evt.stopPropagation()。通过此修改，您的点击处理程序将是：

    ...
    $("li").on("click", function (evt) {
        $(this).siblings().find("*").css("display", "none");
        $(this).children().css("display", "block");
        $(this).children().children().css("display", "block");
        console.log($(this).children()[0]);
        evt.stopPropagation();
    });
    ...

这是修改的小提琴。