javascript-单击时显示子类别

在我的WordPress网站上,我有一个菜单,显示每个类别的子类别.我想要做的是默认情况下隐藏子类别,并且仅当我单击父类别时才显示它们.

我的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>

我的functions.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;  } 

有任何想法吗？谢谢.

解决方法:

使用CSS隐藏它们：

ul.children{
  display:none;
}

然后使用jQuery打开它们：-

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