单击显示子类别 [英] Display Child Categories on click

问题描述

在我的wordpress网站上，我有一个显示每个类别的子类别的菜单。我想要做的是默认隐藏子类别，并仅在我点击父类别时显示它们。

On my wordpress website I have a menu that displays the subcategories for each categorie. What I want to do is to hide the subcategories by default and display them only when I click on the parent category.

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

My 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隐藏它们： -

Use Css to hide them:-

ul.children{
  display:none;
}

然后使用jQuery打开它们： -

And then use jQuery to open them:-

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

这篇关于单击显示子类别的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！