Блог

Вроде как новичок в самом css, и мне нужна помощь, это мой текущий сайт тестирования, где я играю с css, http://test.rascalworldwide.com/?post_type=productamp;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 при предыдущей настройке 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';
        });
    });

  

кроме того, если вы хотите изменить отображение всех дочерних элементов с none на 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;
    });