WordPress分类下拉菜单技术问询：点击父分类显示子分类

嘿，这个需求其实用WordPress自带的工具就能轻松搞定，不用自己从零写复杂的分类查询逻辑！我给你整理了一套最简便的实现方案，分三步就能完成：

1. 用WordPress内置函数输出层级分类结构 #

首先，在你需要展示菜单的模板文件（比如自定义页面模板、page.php）里，用wp_list_categories()函数直接输出所有分类及其子分类，这个函数本身就支持层级渲染，省了我们自己写递归查询的麻烦：

<div class="category-menu">
    <?php
    wp_list_categories(array(
        'title_li' => '',          // 去掉默认的"Categories"标题，让结构更干净
        'depth' => 0,              // 0表示显示所有层级的子分类
        'show_count' => false,     // 是否显示分类下的文章数量，按需开启/关闭
        'hide_empty' => true,      // 是否隐藏没有文章的空分类，按需调整
        'taxonomy' => 'category'   // 指定分类法，默认就是category，可省略
    ));
    ?>
</div>

2. 用CSS美化菜单并默认隐藏子分类 #

接下来加一点CSS，让菜单居中（符合你页面中部展示的需求），同时默认把子分类隐藏起来，做好下拉的基础样式：

/* 基础菜单容器样式 */
.category-menu ul {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    text-align: center; /* 让整个菜单居中 */
    max-width: 1000px; /* 可选：限制菜单宽度，避免太宽 */
}

/* 父分类项样式 */
.category-menu li {
    position: relative;
    display: inline-block; /* 横向排列分类，想要纵向就改成block */
    margin: 0 15px;
    padding: 8px 0;
}

/* 子分类容器默认隐藏 */
.category-menu li ul.children {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%); /* 让子分类菜单相对于父分类居中 */
    background: #ffffff;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    padding: 10px 0;
    min-width: 180px;
}

/* 子分类项样式 */
.category-menu li ul.children li {
    display: block;
    margin: 0;
    padding: 6px 15px;
    text-align: left;
}

/* 子分类 hover 效果，按需调整 */
.category-menu li ul.children li:hover {
    background-color: #f5f5f5;
}

3. 用原生JS实现点击展开/收起子分类 #

最后加一段轻量的原生JS（不用依赖jQuery），实现点击父分类时切换子分类的显示状态，还能加个小箭头提示用户这是可展开的分类：

document.addEventListener('DOMContentLoaded', function() {
    // 找到所有包含子分类的父分类项
    const parentCats = document.querySelectorAll('.category-menu li:has(ul.children)');
    
    parentCats.forEach(parent => {
        // 给父分类链接添加箭头标识
        const arrow = document.createElement('span');
        arrow.textContent = ' ▼';
        arrow.style.fontSize = '0.8em';
        arrow.style.marginLeft = '4px';
        arrow.style.cursor = 'pointer';
        parent.querySelector('a').appendChild(arrow);
        
        // 点击父分类时切换子分类显示状态
        parent.addEventListener('click', function(e) {
            // 如果你想保留父分类的跳转功能，就删掉下面这句
            e.preventDefault();
            
            const childMenu = this.querySelector('ul.children');
            const isVisible = childMenu.style.display === 'block';
            
            // 切换显示/隐藏
            childMenu.style.display = isVisible ? 'none' : 'block';
            // 切换箭头方向
            arrow.textContent = isVisible ? ' ▼' : ' ▲';
        });
        
        // 点击子分类链接时，不触发父分类的收起逻辑
        parent.querySelectorAll('ul.children a').forEach(childLink => {
            childLink.addEventListener('click', function(e) {
                e.stopPropagation();
            });
        });
    });
});

额外小提示 #

• 如果你想让父分类既能跳转又能展开子分类，可以把点击事件绑定在箭头元素上，而不是整个父分类项，这样点击文字跳转，点击箭头展开。
• 可以根据你的主题风格调整CSS里的颜色、间距、阴影等样式，让菜单和网站风格统一。

内容的提问来源于stack exchange，提问作者user136032