JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li id="A">A
        <ul>
            <li id="A_1">1
                <ul>
                    <li id="A_1_1@1" class="member">1@1</li>
                    <li id="A_1_1@2" class="member">1@2</li>
                </ul>
            </li>
            <li id="A_2">2
                <ul>
                    <li id="A_2_2@1" class="member">2@1</li>
                    <li id="A_2_2@2" class="member">2@2</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

CSS

ul li {
    font-weight: normal;
    color:black;
}
li.selected {
    font-weight: bold;
    color:green;
}
li.clickedli{
    font-weight:bold;
    color:firebrick;
}
li > ul {
    display: none;
}

JavaScript

$('li').on('click', function (event) {
	    event.preventDefault();
	    event.stopPropagation();	
	    var $li = $(this);
        if($("li.clickedli")){
	        $("li.clickedli").removeAttr("class");
	    }
	    if($("li.selected")){
	        $("li.selected").removeAttr("class");
	    }
        if($li.attr("class") && $li.attr("class") == "member"){
	        $("li.selected").removeAttr("class");
	        $li.toggleClass("clickedli");
	        $li.parents().toggleClass("clickedli");
	    }else{
	        $li.toggleClass("selected");
	        $li.parents().toggleClass("selected");
        }
		    $li.children().toggle("slow");
            $li.siblings().childern().toggle("slow");
		});