Click chaining jquery

Question

I make a sample "Tree view" plugin on jquery (homework assignment), but i'm having a bit of problem : here is code :

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

sample html partly:

<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>

so the problem i'm facing is "chaining" on click, i want to display only children elements (on console), but on every click i get the "previous" child elements and new one - i want to visualize only current ones.

Answer 1

I think what you are looking for is to stop the propagation of the event. That can be done by adding the following code to the event handler evt.stopPropagation(). With this modification your click handler would be:

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

Here's the fiddle for the modification.