Question

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

有什么想法吗？感谢。

Answer 1

使用Css隐藏它们： -

ul.children{
  display:none;
}

然后使用jQuery打开它们： -

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

Answer 2

使用此Css如下

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

在Javascript中：

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

单击显示子类别

2 个答案: