JSFiddle - React, Tailwind, and code Playground

by Alex

HTML

<div>
<ul class="menu">
  <li class="hasChild">
    <a href="#">Группа1</a>
    <ul>
      <li class="hasChild current">
        <a href="#">Подгруппа1.1</a>
        <ul>
          <li class=""><a href="#">Подгруппа1.1.1</a></li>
          <li><a href="#">Подгруппа1.1.2</a></li>
        </ul>
      </li>
      <li class="hasChild">
        <a href="#">Подгруппа1.2</a>
        <ul>
          <li><a href="#">Подгруппа1.2.1</a></li>
          <li><a href="#">Подгруппа1.2.2</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li class="hasChild">
    <a href="#">Группа2</a>
    <ul>
      <li class="hasChild">
        <a href="#">Подгруппа2.1</a>
        <ul>
          <li><a href="#">Подгруппа2.1.1</a></li>
          <li><a href="">Подгруппа2.1.2</a></li>
        </ul>
      </li>
      <li><a href="#">Подгруппа2.2</a></li>
    </ul>
  </li>
  <li>
    <a href="#">Группа3</a>
  </li>
</ul>
</div>

CSS

ul.menu > li ul {display:none;}
ul.menu li, ul.menu li a {color:green;}
ul.menu li.current, ul.menu li.current > a {color:red;}

JavaScript

$(function() {

	$('.current').parents('li.hasChild ul').show();
  
	$('.hasChild > a').on('click',function(){

  	var t = $(this),
    		p = t.parent()
    ;
    
    p.parent().find('>li>ul').slideUp();
    
    if(p.find('ul:first').css('display') == 'none')
    {
        p.find('ul:first').slideDown();
    }
    else
    {
    	p.find('ul:first').slideUp();
    }
    
  	return false;
	});
});