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

Question

对 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;
}

Answer 1

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


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

但是，如果你想隐藏所有子项，并且只在点击父项时显示它。你不能只在 css 中这样做，css 仅适用于某些元素的静态样式。页面交互通常由 javascript 完成。我假设你的父元素的 class 名称是 .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';
        });
    });

此外，如果您希望通过点击父项将所有子项的显示从 none 更改为阻止，我建议设置一个全局变量作为标志。


    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;
    });

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

How to hide Child Category unless Parent Category is clicked?

css

product

filter

woocommerce