Question

我制作一个样本＆＃34;树视图＆＃34;关于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>

所以我面临的问题是＆＃34;链接＆＃34;点击，我想只显示子元素（在控制台上），但每次点击我得到＆＃34;之前＆＃34;子元素和新元素 - 我想只想象当前的元素。

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();
    });
    ...

以下是修改的fiddle。

单击链接jquery

1 个答案: