JSFiddle - React, Tailwind, and code Playground

by Alexander Startsev

HTML

<ul class="catalog-list">
						<li><a href="#">Элемент 1</a></li>
						<li><a href="#">Элемент 2</a></li>
						<li><a href="#">Элемент 3</a>
							<ul>
								<li><a href="#">Элемент подменю 1</a></li>
								<li><a href="#">Элемент подменю 2</a></li>
								<li><a href="#">Элемент подменю 3</a></li>
							</ul>
						</li>
						<li><a href="#">Элемент 4</a></li>
						<li><a href="#">Элемент 5</a></li>
					</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

CSS

ul.catalog-list{
	margin: 0;
	list-style: none;
	padding-left: 2%;
}
ul.catalog-list > li > a{
	font-size: 75%;
	color: #000;
	text-decoration: none;
	font-weight: 700;
}
ul.catalog-list > li > a:hover,
ul.catalog-list > li > a.active{
	color: #ec6037;
}
ul.catalog-list ul{
	display: none;
	margin: 0;
	list-style: none;
	padding: 5%;
}
ul.catalog-list ul>li>a{
	display: block;
	font-size: 75%;
	font-weight: 300;
	color: #575656;
	text-decoration: none;
	padding-top: 2%;
	padding-bottom: 2%;
}
ul.catalog-list ul>li>a:hover{
	background: #ec6037;
	margin-left: -48px;
	padding-left: 48px;
	color: #fff;
}

JavaScript

$(document).ready(function() {
		$('ul.catalog-list > li > a').click(function(e) {
            e.preventDefault();
            var thisLink = $(this),
                thisChildList = thisLink.find('~ ul');
            
            if(thisChildList.length){
				if(!thisLink.hasClass('active')){
	                thisLink.addClass('active');
    	        } else {
        	        thisLink.removeClass('active');
            	}
				thisChildList.stop().slideToggle('slow');
            }
		});
	});