JSFiddle - React, Tailwind, and code Playground

by lithium182

HTML

<ul>
    <li class='firstLevel'><a href='#'>11111111</a>
    <ul>
            <li><a href='#'>11</a></li>
            <li><a href='#'>12</a></li>
            </ul>
    </li>
    <li class='firstLevel'><a href='#'>22222222</a>
        <ul>
            <li><a href='#'>21</a>
            <ul>
            <li><a href='#'>211</a></li>
            <li><a href='#'>212</a></li>
            </ul>
            </li>
            <li><a href='#'>22</a>
            <ul>
            <li><a href='#'>221</a>
                <ul>
            <li><a href='#'>2211</a></li>
            <li><a href='#'>2212</a></li>
            </ul>
                </li>
            <li><a href='#'>222</a>
            <ul>
            <li><a href='#'>2221</a></li>
            <li><a href='#'>2222</a></li>
            </ul>    
                </li>
            </ul>
            </li>
        </ul>
    </li>
    <li class='firstLevel'><a href='#'>33333333</a></li>
    <li class='firstLevel'><a href='#'>44444444</a>
    <ul>
            <li><a href='#'>41</a></li>
            <li><a href='#'>42</a></li>
        </ul>
    </li>
</ul>

CSS

ul {
    list-style-type:none;
}
li {
    margin-left: -20px;
    cursor:pointer;
}

li a:hover {
    background-color: gray;

}

ul ul{
    display:none;   
}

JavaScript

$("li").click(function (e) {
                var text = $(this).parents('li').map(function() {
        alert($(this).children('a').text());
    }).get();
    text.unshift($(this).children('a').text();
    var outputString = text.join('###');
       alert(outputString);
                /*
                var cnt = $(e.target).parents('ul').length;
                cnt--;
                var ttt = '';
                //CNT funguje spravne
                for (var i = 0; i < cnt; i++) {
                    //var tt = $(e.target).parents('li').eq(cnt).text();
                    //var tt = $(e.target).parent().closest('li').text();
                }
*/                
                $(this).find('>ul').slideToggle();
                e.stopPropagation();
        )
})


/* pro Seznam a sipky ke GROUP DIVu:
ul {
    list-style-image:url('image.gif');
}
*/