时间戳

首页 > 解决方案 > 除非单击父类别，否则如何隐藏子类别？

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

问题描述

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

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

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

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

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

标签： csswoocommercefilterproduct

解决方案

我不确定您的第二个 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;
    });

推荐阅读