Tree menu - Error selecting element (ul:onclick)

Question

I have a problem in the tree menu below. When I click on the child elements of ul-0 I run the class change. How to avoid this ?

function ready (fn) 
{
    if (document.attachEvent ? document.readyState === "complete" : document.readyState !== "loading")
    {
        return fn();
    }
    else
    {
        return document.addEventListener('DOMContentLoaded', fn);
    }
}

ready( function() {
    var n = document.querySelector('.menu-arvore');
    var n_0 = document.getElementsByClassName('li-0');
    var n_1 = document.getElementsByClassName('li-1');
       
    for (let n = 0; n < n_0.length; n++) 
    {
        const element = n_0[n];
        el = element;
        el.onclick = function() {
            var c = element.childNodes;
            if(c[1].className === 'ul-0' )
            {
                c[1].className = "ul-0 ativo";
            }
            else if(c[1].className == "ul-0 ativo")
            {
                c[1].className = "ul-0";
            }   
            return false;
        };            
    } 

    for (let n = 0; n < n_1.length; n++) 
    {
        const element = n_1[n];
        element.onclick = function() {
            var c = element.childNodes;     
            if(c[1].className === 'ul-1' )
            {
                c[1].className = "ul-1 ativo";
            }
            else if(c[1].className === 'ul-1 ativo')
            {
                c[1].className = "ul-1";
            }     
            return false;
        };
                
    } 
       
})

.menu-arvore{
    cursor: pointer;
}
.ul-0 , .ul-1{
    display: none;
}
.ativo{
    display: block !important;
}

<div class="header">
    <h1>Menu Árvore</h1>
</div>
<ul class="menu-arvore">
    <li class="li-0">2018
        <ul class="ul-0">
            <li class="li-1">Janeiro
                <ul class="ul-1">
                    <li >Cuidando da casa comum</li>
                </ul>
            </li>
            <li class="li-1">Fevereiro
                <ul class="ul-1" >
                    <li >Política em pauta</li>
                </ul>
            </li>
            <li class="li-1">Março
                <ul class="ul-1">
                    <li >Semeando o bem</li>
                </ul>
            </li>
        </ul>
    </li>
    <li class="li-0">2017
        <ul class="ul-0">
            <li class="li-1">Janeiro
                <ul class="ul-1">
                    <li>Cuidando da casa comum</li>
                </ul>
            </li>
            <li class="li-1">Fevereiro
                <ul class="ul-1">
                    <li>Política em pauta</li>
                </ul>
            </li>
            <li class="li-1">Março
                <ul class="ul-1">
                    <li>Semeando o bem</li>
                    <li>Semeando o bem</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

Answer 1

You must use stopPropagation(); so that the click on these elements does not affect the ul main. To do this, create a eventListener for each li daughter:

var subs = document.body.querySelectorAll(".ul-0 li");
for(var x=0; x<subs.length; x++){
   subs[x].addEventListener("click", function(e){
      e.stopPropagation();
   });
}

Example:

var subs = document.body.querySelectorAll(".ul-0 li");
for(var x=0; x<subs.length; x++){
   subs[x].addEventListener("click", function(e){
      e.stopPropagation();
   });
}


function ready (fn) {
        if (document.attachEvent ? document.readyState === "complete" : document.readyState !== "loading")
        {
           return fn();
        }
        else{
           return document.addEventListener('DOMContentLoaded', fn);
        }
 }
ready(function(){
       var n = document.querySelector('.menu-arvore');
       var n_0 = document.getElementsByClassName('li-0');
       var n_1 = document.getElementsByClassName('li-1');
       
       for (let n = 0; n < n_0.length; n++) {
                const element = n_0[n];
                el = element;
                el.onclick = function() {
                var c = element.childNodes;                
                    
                    if(c[1].className === 'ul-0' ){
                        c[1].className = "ul-0 ativo";
                    }else if(c[1].className == "ul-0 ativo"){
                        c[1].className = "ul-0";
                    }   
                    return false;
                };
                
            } 

    
            for (let n = 0; n < n_1.length; n++) {
                const element = n_1[n];

                element.onclick = function() {

                var c = element.childNodes;                   
                
                    if(c[1].className === 'ul-1' ){
                        c[1].className = "ul-1 ativo";
                    }else if(c[1].className === 'ul-1 ativo'){
                        c[1].className = "ul-1";
                    }     
                    return false;
                };
                
            } 
       
})

.menu-arvore{
        cursor: pointer;
    }
    .ul-0 , .ul-1{
        display: none;
    }
    .ativo{
        display: block !important;
    }

<div class="header">
        <h1>Menu Árvore</h1>
    </div>
<ul class="menu-arvore">
    <li class="li-0">2018
        <ul class="ul-0">
            <li class="li-1">Janeiro
                <ul class="ul-1">
                    <li >Cuidando da casa comum</li>
                </ul>
            </li>
            <li class="li-1">Fevereiro
                <ul class="ul-1" >
                  <li >Política em pauta</li>
                </ul>
            </li>
            <li class="li-1">Março
                <ul class="ul-1">
                    <li >Semeando o bem</li>
                </ul>
            </li>
        </ul>
    </li>
    <li class="li-0">2017
        <ul class="ul-0">
            <li class="li-1">Janeiro
                <ul class="ul-1">
                    <li>Cuidando da casa comum</li>
                </ul>
            </li>
            <li class="li-1">Fevereiro
                <ul class="ul-1">
                  <li>Política em pauta</li>
                </ul>
            </li>
            <li class="li-1">Março
                <ul class="ul-1">
                    <li>Semeando o bem</li>
                    <li>Semeando o bem</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>