JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="menu">
<li  class="open" data-level="1">
  <a href="javascript:;">Category</a>
     <ul class="submenu">
         <li class="open" data-level="2">Subcategory11</li>
         <li class="open"  data-level="2">Subcategory12</li>
    </ul>
</li>
<li  class="open" data-level="1">
  <a href="javascript:;">Category2</a>
     <ul class="submenu">
         <li class="open" data-level="2">Subcategory21</li>
         <li class="open"  data-level="2">Subcategory22</li>
    </ul>
</li>
</ul>

JavaScript

var actMenu = 0;
var $menu = $('ul.menu');
$('li[data-level]').on("click",function(e){
		e.preventDefault();
    $(".open").removeClass('act');
    var $parents = $(this).parents('li.open')
		$(this).addClass('act');
    $parents.addClass('act');

  	/* считаем сколько элементов активно */
		
	/*
	if (($(this).data('level')) < actMenu) {
 			$($('li.act'), $(this).parent()).removeClass('act');
 			$(this).closest('ul.open').addClass('act');
      console.log($(this).closest('ul.open'))
	}
  actMenu=$(this).data('level');
  */
  return !1;
});