JSFiddle - React, Tailwind, and code Playground

HTML

<div class="leftmenu">	<ul>
						<li><span><a href="#">Пункт меню</a><i class="open">+</i></span>
							<ul>
								<li><span><a href="#">Под пункт меню</a></span></li>
								<li><span><a href="#">Под пункт меню</a></span></li>
								<li><span><a href="#">Под пункт меню</a></span></li>
								<li><span><a href="#">Под пункт меню</a></span></li>
							</ul>
						</li>
						<li><span><a href="#">Пункт меню</a></span></li>
						<li><span><a href="#">Пункт меню</a></span></li>
						<li><span><a href="#">Пункт меню</a><i class="open">+</i></span>
							<ul>
								<li><span><a href="#">Под пункт меню</a></span></li>
								<li><span><a href="#">Под пункт меню</a></span></li>
								<li><span><a href="#">Под пункт меню</a></span></li>
							</ul>
						</li>
                    </ul></div>

CSS

.leftmenu li {list-style:none;  }
.leftmenu li span {border:1px solid #96b6c6; border-radius:7px; padding:13px 10px 13px 17px; margin-bottom:4px; background:url('../images/head.jpg') no-repeat 0 0; position:relative; display:block;}
.leftmenu li a {color:#363636; text-decoration:none;}
.leftmenu ul ul {display:none;}
.leftmenu .open {position:absolute; width:26px; height:26px; background:url('../images/open.png') no-repeat 0 0; top:9px; right:12px; z-index:140; cursor:pointer; }
.leftmenu .open:hover, .leftmenu .open.active { background:url('../images/open.png') no-repeat -26px 0; }
.leftmenu li li {margin-left:20px;}
.leftmenu li li span {padding-top:10px; padding-bottom:10px;}
.leftmenu li a:hover, .leftmenu li.active>span>a, .leftmenu li li.active a {text-decoration:underline;}

JavaScript

$(document).ready(function(){

    $(".open").click(function(){
        $(this).parent("span").parent("li").children("ul").slideToggle("slow");
        $(this).toggleClass("active");
    }
	);	
	
	});