WordPress菜单默认隐藏子分类，点击父分类时显示的实现需求

Got it, let's get that collapsible category menu sorted for your WordPress site. The goal is to hide child categories by default and toggle them when clicking their parent—here's a straightforward solution that plays nice with your existing setup:

Step 1: Ensure Your WordPress Category Output Has Proper Classes #

First, if you're using wp_list_categories to generate that menu (the standard approach for WordPress category lists), it automatically adds a parent class to list items with child categories, and a children class to the nested subcategory list. Use this code in your theme template to generate the menu correctly:

<?php
wp_list_categories(array(
    'title_li' => '', // Remove default "Categories" title
    'depth' => 2, // Show only parent + child categories
    'class' => 'scrolling cat mCustomScrollbar _mCS_2 mCS-autoHide', // Keep your existing classes
));
?>

This gives us the HTML hooks we need for styling and interactivity.

Step 2: Add CSS to Hide Child Categories by Default #

Drop this into your theme's custom CSS (Appearance > Customize > Additional CSS) or your theme's style.css file:

/* Hide child categories by default */
.cat .children {
    display: none;
    margin-left: 18px; /* Optional: Indent subcategories for clearer hierarchy */
}

/* Make parent categories look clickable */
.cat li.parent {
    cursor: pointer;
    position: relative;
    padding-right: 25px; /* Make space for the toggle icon */
}

/* Add a +/- toggle icon for better UX */
.cat li.parent::after {
    content: '+';
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
}

/* Swap icon when parent category is open */
.cat li.parent.open::after {
    content: '-';
}

Step 3: Add JavaScript to Handle Click Toggles #

Add this script to your theme's footer.php (right before </body>) or use a custom JS plugin to enqueue it:

document.addEventListener('DOMContentLoaded', function() {
    // Grab all parent category items
    const parentCats = document.querySelectorAll('.cat li.parent');
    
    parentCats.forEach(parent => {
        parent.addEventListener('click', function(e) {
            // Only trigger if we click the parent item itself (not a child link)
            if (e.target === this || this.contains(e.target)) {
                const childMenu = this.querySelector('.children');
                if (childMenu) {
                    // Toggle child menu visibility
                    childMenu.style.display = childMenu.style.display === 'block' ? 'none' : 'block';
                    // Toggle the "open" class to swap the icon
                    this.classList.toggle('open');
                }
            }
        });
    });

    // Optional: Update mCustomScrollbar when menu expands/collapses
    // Uncomment this if you're using jQuery for the scrollbar:
    // parentCats.forEach(parent => {
    //     parent.addEventListener('click', function() {
    //         setTimeout(() => {
    //             $('.mCustomScrollbar').mCustomScrollbar('update');
    //         }, 100);
    //     });
    // });
});

Quick Notes #

• If your existing HTML doesn't have the parent/children classes, double-check your wp_list_categories call—those are default classes from WordPress's built-in category walker.
• The optional scrollbar update fixes issues where the scrollbar doesn't adjust when child categories expand (since your menu uses mCustomScrollbar).

内容的提问来源于stack exchange，提问作者Jacob K.