collapsible list with dynamically loaded content

I have tried all kinds of lists I found all over the internet, but none of them seem to properly work. I think te reason for this might be the fact that the content of the list is dynamiccally loaded (with jquery ajax).

On $(document).ready I load the list and append the html data to the div.

After that I try to make the list collapsible (the list is nested, it's a navigation for a database).

My best try so far:

$(document).ready(function(){
    loadnavigation(); //to load the li items//
    fold();
})

function fold(){
function fold1(){
        $("#container").on("click", "#nav > li", function(){

                $(this).children().toggleClass("hide");

        });
}

function fold2(){
        $("#container").on("click", "#nav > li > ul > li", function(){
                $(this).children().toggleClass("hide");
                
        });
}
fold1();
fold2();
}

The navigation is loaded and the most upper ul has the id 'nav'. On document.ready I add the class 'hide to #nav>li>ul and #nav>li>ul>li>ul, so the li items are set to hide by default. The problem with this list however is that if you click a link or a deeper down li item in the tree, it registers this also as a click on the levels above.

Is there a way to fix this? Or a better (cleaner) way to make collapsible nested lists with dynamic content?