JSFiddle - React, Tailwind, and code Playground

by Alireza Safian

HTML

<div class="widget">
  <ul class="product-categories">
    <li class="cat-item cat-item-7 cat-parent current-cat-parent"><a href="http://strona.www/odzie/">Odzież </a>
      <ul class="children">
        <li class="cat-item cat-item-13"><a href="http://strona.www/odziez/bluzy-kolorowe-i-biale/">Bluzy białe</a>
        </li>
        <li class="cat-item cat-item-14"><a href="http://strona.www/odziez/bluzy-100-bawelna/">Bluzy 100% bawełna</a>
        </li>
        <li class="cat-item cat-item-22"><a href="http://strona.www/odziez/bluzy-na-trok/">Bluzy na trok</a>
        </li>
        <li class="cat-item cat-item-32"><a href="http://strona.www/odziez/spodnie-kolorowe-i-biale/">Spodnie kolorowe i białe</a>
        </li>
        <li class="cat-item cat-item-68"><a href="http://strona.www/odziez/spodnie-100-bawelna/">Spodnie 100% bawełna</a>
        </li>
        <li class="cat-item cat-item-33 current-cat"><a href="http://strona.www/odziez/spodnie-biale/">Spodnie białe</a>
        </li>
      </ul>
    </li>
    <li class="cat-item cat-item-43"><a href="http://strona.www/fartuch-/">Fartuch </a>
    </li>
    <li class="cat-item cat-item-44"><a href="http://strona.www/fartuch-p/">Fartuch </a>
    </li>
    <li class="cat-item cat-item-8"><a href="http://strona.www/obuwie/">Obuwie </a>
    </li>
  </ul>
</div>

CSS

.widget li:not(.opened):hover {
  background: #002d5e;
}
.children {
  display: none;
}
.open .children {
  display: block;
}

JavaScript

$(document).ready(
  function() {
  $('.cat-parent').click(
    function(event) {
      event.preventDefault();
      $(this).toggleClass('opened');
    });
});