除非单击父类别，否则如何隐藏子类别？答案

【问题标题】：How to hide Child Category unless Parent Category is clicked?除非单击父类别，否则如何隐藏子类别？
【发布时间】：2020-12-22 18:02:39
【问题描述】：

对 css 本身有点陌生，我需要一些帮助，这是我目前使用 css 的测试站点，http://test.rascalworldwide.com/?post_type=product&customize_changeset_uuid=90ec360e-7331-42b5-aab3-effecf256451。尽管我已经尝试了将近一天来为我启用选项，但我能够隐藏子类别，当我单击父类别时，子类别会出现。

这是我用来隐藏子类别的代码。

.wpf_items_wrapper .wpf_item .wpf_submenu{
   display: none;
}

这是我使用的代码，但仍然无法显示子类别。

.wpf_items_wrapper .wpf_item .wpf_submenu [type=”checkbox”]{
   display: block;
}

【问题讨论】：

标签： css woocommerce filter product

【解决方案1】：

我不确定你的第二个css代码是否可以在display: none的先前设置下访问，如果你想使用复选框将所有子元素与其自身隐藏，你可以做什么：


    .className[type=”checkbox”].checked{
       display: none;
    }

但是，如果您想隐藏所有子项，并且仅在单击父项时显示它。您不能仅在 css 中执行此操作，css 仅用于某些元素的静态样式。页面交互通常由 javascript 完成。我假设你的父元素的类名是.wpf_items_wrapper .wpf_item .wpf_submenu，然后在js文件中：


    const parentTag = document.querySelector('.wpf_items_wrapper .wpf_item .wpf_submenu');
    const childTags = parentTag.querySelectorAll('*');
    parentTag.addEventListener('click', ()=>{
        childTags.forEach(ch=>{
            ch.style.display = 'block';
        });
    });

另外，如果你想通过点击父级将所有子级的显示从无更改为阻塞，我建议设置一个全局变量作为标志。


    const parentTag = document.querySelector('.wpf_items_wrapper .wpf_item .wpf_submenu');
    const childTags = parentTag.querySelectorAll('*');
    var flag = true; 

    // initially set display to none if you haven't done it in css
    window.addEventListener('load', ()=>{
        childTags.forEach(ch=>{
            ch.style.display = 'none';
        });
    });

    parentTag.addEventListener('click', ()=>{
        if(flag){
            childTags.forEach(ch=>{
                ch.style.display = 'block';
            });
        }else{
            childTags.forEach(ch=>{
                ch.style.display = 'none';
            });
        }
        flag = !flag;
    });

【讨论】：