单击时显示子类别

Posted 2023-05-09

【中文标题】单击时显示子类别

【英文标题】：Display Child Categories on click

【发布时间】：2018-09-13 15:40:24

【问题描述】：

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

我的函数.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;   

有什么想法吗？谢谢。

【参考方案1】：

使用 Css 隐藏它们：-

ul.children
  display:none;

然后用jQuery打开它们：-

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

【讨论】：

@JacobK。很高兴帮助你:):)

我刚刚意识到上面的函数也会从 cmets 部分隐藏 ul.children。 =/ 知道如何仅从指定的 div 中隐藏 ul.children 吗？再次感谢。

`$(this) 本身会检查特定的 html（被点击）。所以我无法理解你的问题。

对不起，我的错。我设法通过在 css 中添加 li.cat-item > ul.children 来修复它。感谢您的快速回复！

【参考方案2】：

如下使用这个Css

 <style>     
ul.childrendisplay:none
</style>

在 javascript 中：

<script type="text/javascript">
$('.cat-item').click(function()

    if($(this).find('ul.children'))
    
        $(this).find('ul.children').toggle();
    
);
</script>

【讨论】：

感谢您的回答。 :)