Untergeordnete Kategorien auf Klick anzeigen

Auf meiner WordPress-Website habe ich ein Menü, das die Unterkategorien für jede Kategorie anzeigt. Was ich tun möchte, ist, die Unterkategorien standardmäßig auszublenden und sie nur anzuzeigen, wenn ich auf die übergeordnete Kategorie klicke.

Mein HTML:

<ul class="scrolling cat mCustomScrollbar _mCS_2 mCS-autoHide" style="position: relative; overflow: visible;">
<div id="mCSB_2" class="mCustomScrollBox mCS-minimal-dark mCSB_vertical mCSB_outside" style="max-height: 145px;" tabindex="0">
<div id="mCSB_2_container" class="mCSB_container" style="position: relative; top: -240px; left: 0px;" dir="ltr">
<li class="cat-item cat-item-31">
<a href="https://www.website.com/option">Option</a> <span>11</span>
<ul class="children">
<li class="cat-item cat-item-10867">
<a href="https://www.website.com/option2">Another option</a> <span>0</span>
</li>
</ul>
</li>

Meine Funktionen.php

function categorias() {
$args = array('hide_empty' => FALSE, 'title_li'=> __( '' ), 'show_count'=> 1, 'echo' => 0 );             
$links = wp_list_categories($args);
$links = str_replace('</a> (', '</a> <span>', $links);
$links = str_replace(')', '</span>', $links);
echo $links;  } 

Irgendwelche Ideen? Danke.

Verwenden Sie Css, um sie zu verbergen: –

ul.children{
  display:none;
}

Und dann verwenden Sie jQuery, um sie zu öffnen: –

jQuery('li.cat-item').on('click',function(){
   $('ul.children').hide();
   $(this).find('ul.children').show();
});

Verwenden Sie dieses CSS wie unten

 <style>     
ul.children{display:none}
</style>

Im Javascript:

<script type="text/javascript">
$('.cat-item').click(function()
{
    if($(this).find('ul.children'))
    {
        $(this).find('ul.children').toggle();
    }
});
</script>