JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="produtosMenu margin-top-45">
  <li page="produtos/componentes-plasticos-diversos/" family="16" class="father plus">
    <span class="produtosMenuClick">Componentes Plásticos Diversos</span>
  </li>
  <li page="produtos/componentes-plasticos-diversos/teste-1/" family="16" children="38" class="son1 plus">
    <ul style="display: none;" class="produtosSubmenu">
      <li onclick="window.location='/produtos/componentes-plasticos-diversos/teste-1/'">
        <a href="/produtos/componentes-plasticos-diversos/teste-1/">Teste 1</a>
      </li>
    </ul>
  </li>
  <li page="produtos/espelhos-retrovisores/" family="14" class="father plus">
    <span>Espelhos Retrovisores</span>
  </li>
  <li page="produtos/espelhos-retrovisores/teste-2/" family="14" children="39" class="son1 plus">
    <ul style="display: none;" class="produtosSubmenu">
      <li onclick="window.location='/produtos/espelhos-retrovisores/teste-2/'">
        <a href="/produtos/espelhos-retrovisores/teste-2/">Teste 2</a>
      </li>
    </ul>
  </li>
</ul>

JavaScript

$(document).on('click', ".produtosMenu li span", function() {
    var index = $(this).closest('li').index('li') + 1;
    $('li').eq(index).find('ul.produtosSubmenu').fadeToggle();
});