JSFiddle - React, Tailwind, and code Playground

HTML

<div class="produtosMenuItens">
    <div class="produtosMenuItensTit bs">Residencial</div>
    <ul class="produtosMenuItensDiplay" style="display: block;">
        <li class="produtosMenuItensLista">ITEM 1</li>
        <li class="produtosMenuItensLista">ITEM 2</li>
    </ul>
</div>
<div class="produtosMenuItensTit">Industrial</div>
<ul class="produtosMenuItensDiplay" style="display: none;">
    <li class="produtosMenuItensLista">ITEM 3</li>
    <li class="produtosMenuItensLista">ITEM 4</li>
</ul>
</div>

CSS

.active {background-color:red;}
.produtosMenuItensLista {cursor:pointer;}

JavaScript

$(".produtosMenuItensTit").click(function() {
    if($(this).parent().find(".produtosMenuItensDiplay").css('display') == 'none'){
        $(".produtosMenuItensDiplay").css('display','none');
        $(this).parent().find(".produtosMenuItensDiplay").show();
    }
    else{
        $(this).parent().find(".produtosMenuItensDiplay").hide();
    }
});
$('.produtosMenuItensLista').click(function(){
    //remove class active
    $('.produtosMenuItensLista').removeClass('active');
    //adiciona class active ao item clicado
    $(this).addClass('active');
});