I am trying to create a tree navigator using asp.net and jQuery.
first I get the root nodes from database and bind them to asp Repeater as bellow,
<ul>
   <asp:Repeater ID="repMail" runat="server">
      <ItemTemplate>
         <li class="list <%# Eval("Type") %>" id="<%# Eval("Id") %>">
            <span style="margin-right: 10px" class="glyphicon <%# GetIcon(Eval("Type"))  %>"></span><%# Eval("Title") %>
         </li>
      </ItemTemplate>
   </asp:Repeater>
</ul>
and then when user click on the one of the root node i am loading the children...it will go until there is no folder. Jquery is as bellow,
$('.list.Folder').click(function (e) {
    e.stopPropagation();
    var self = $(this);
    var s = self.find('span');
    var children = self.find(' > ul > li');
    var count = children.length;
    //check if child nodes already append
    if (count == 0) {
        //changing icon folder open
        if (s.hasClass('glyphicon-folder-close')) {
            s.removeClass('glyphicon-folder-close');
            s.addClass('glyphicon-folder-open');
            var code = self.attr('id');
            // get the child nodes from database using ajax get
            var url = "TreeItem";
            var arg = {
                action: 'GetNodes',
                type: 'Folder',
                data: code
            };
            $.get(url, arg)
                .done(function (r) {
                    var msgAll = $.parseJSON(r);
                    var u = $('<ul>');
                    for (var i = 0; i < msgAll.length; i++) {
                        var m = msgAll[i];
                        if (m.Type === 'Folder') {
                            u.append('<li class="list ' + m.Type + '" id="' + m.Id + '"><span style="margin-right: 10px" class="glyphicon glyphicon-folder-close"></span>' + m.Title + '</li>');
                        } else if (m.Type === 'List') {
                            u.append('<li class="list ' + m.Type + '" id="' + m.Id + '"><span style="margin-right: 10px" class="glyphicon glyphicon-leaf"></span>' + m.Title + '</li>');
                        }
                    }
                    u.append('</ul>');
                    u.appendTo(self);
                })
                .fail(function () {
                });
        }
    } else {
        if ((s.hasClass('glyphicon-folder-open')) && (children.is(':visible'))) {
            s.removeClass('glyphicon-folder-open');
            s.addClass('glyphicon-folder-close');
            children.hide();
        } else if ((s.hasClass('glyphicon-folder-close')) && (children.is(':hidden'))) {
            s.removeClass('glyphicon-folder-close');
            s.addClass('glyphicon-folder-open');
            children.show();
        }
    }
    return false;
});
In here from 'GetIcon' method it will return 'glyphicon-folder-close' if Type is a Folder and 'glyphicon-leaf' if it is just a node.
My issue is when I click on the second level Folder li item it will refer to parent though I have use stopPropagation() and return false.
 
    