How to create subcategories with Javascript

Question

I have that list:

<li>
    <a href="" class="category-subtree-expandable">Vestuário</a>
    <ul>
        <li>
            <a href="" class="category-subtree-expandable">Feminino</a>
            <ul>
                <li>
                    <a href="/boa-forma/zumba-fitness/vestuario/feminino/blusas/camisetas" title="Camisetas">Camisetas</a>
                </li>
                <li>
                    <a href="" title="Masculino">Masculino</a>
                </li>
                <li>
                    <a href="" title="Regatas">Regatas</a>
                </li>
                <li>
                    <a href="" title="Tops">Tops</a>
                </li>
                <li>
                    <a href="" title="Capri">Capri</a>
                </li>
                <li>
                    <a href="" title="Legging">Legging</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="">Masculino</a>
        </li>
        <li>
            <a href="">Unissex</a>
        </li>
    </ul>
</li>

And I have this script:

if ($submenu) {
    [].forEach.call($submenu.querySelectorAll('.category-subtree-expandable'), function ($el) {
        $el.href = '#';
        $el.addEventListener('click', function (event) {
            event.preventDefault();
            this.nextElementSibling.classList.toggle('active');
            this.classList.toggle('active');
        });
    });
}

When I’m on a page of some subcategory, the precise subcategory is highlighted, for example: changes color to subcategory

Answer 1

How about using CSS to select the element through the Category title to set the asset class? for example,

// Javascript nativo
document.querySelector('a[title="Masculino"]').classList.add('active');

// ou em jQuery
$('a[title="Masculino"]').addClass('activo');