WordPress中实现PHP生成ID的Div显示隐藏功能求助

嘿，看起来你在给reiseberichte自定义文章类型做标签的展开/收起功能时卡壳了！我来帮你把现有代码补全，搞定显示隐藏的交互逻辑～

首先先梳理下你现有代码里的几个小坑，再给你一套完整的实现方案：

现有代码的潜在问题 #

• get_terms('post_tag')默认会包含没有关联文章的标签，建议加上hide_empty参数过滤
• post_parent => $post->ID这个参数要谨慎：只有当reiseberichte是层级型自定义文章类型（设置了hierarchical => true）时才需要，否则会过滤掉所有文章
• 缺少触发显示/隐藏的交互元素和对应的JS逻辑

完整实现代码 #

1. PHP模板部分（输出标签和对应文章） #

<?php
global $post;

// 获取关联了文章的标签，按名称排序
$terms = get_terms(array(
    'taxonomy' => 'post_tag',
    'hide_empty' => true, // 只显示有文章的标签
    'orderby' => 'name',
    'order' => 'ASC'
));

if (!empty($terms)) :
    foreach ($terms as $term) :
        // 查询当前标签下的reiseberichte文章
        $args = array(
            'orderby' => 'title',
            'order' => 'ASC',
            'post_type' => 'reiseberichte',
            'posts_per_page' => -1, // 显示所有关联文章
            'tax_query' => array(
                array(
                    'taxonomy' => 'post_tag',
                    'field' => 'slug',
                    'terms' => $term->slug
                )
            )
            // 👉 如果你的reiseberichte是子文章类型，才保留下面这行，否则注释掉！
            // 'post_parent' => $post->ID
        );

        $tag_posts = new WP_Query($args);

        if ($tag_posts->have_posts()) :
?>
            <!-- 标签标题按钮，点击切换显示隐藏 -->
            <div class="tag-toggle" data-tag-id="<?php echo $term->term_id; ?>">
                <h3><?php echo $term->name; ?> (共<?php echo $term->count; ?>篇)</h3>
                <span class="toggle-icon">+</span>
            </div>

            <!-- 标签对应的文章列表，默认隐藏 -->
            <div class="tag-posts" id="tag-posts-<?php echo $term->term_id; ?>" style="display: none;">
                <ul>
                    <?php while ($tag_posts->have_posts()) : $tag_posts->the_post(); ?>
                        <li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
                    <?php endwhile; ?>
                </ul>
            </div>
<?php
        endif;
        wp_reset_postdata(); // 重置查询，避免影响后续全局循环
    endforeach;
endif;
?>

2. JS交互部分（实现点击切换） #

可以把这段代码放在主题的footer.php底部，或者通过wp_enqueue_script加载到前端：

<script>
document.addEventListener('DOMContentLoaded', function() {
    // 获取所有标签切换按钮
    const toggleButtons = document.querySelectorAll('.tag-toggle');
    
    toggleButtons.forEach(button => {
        button.addEventListener('click', function() {
            const tagId = this.getAttribute('data-tag-id');
            const postList = document.getElementById(`tag-posts-${tagId}`);
            const icon = this.querySelector('.toggle-icon');
            
            // 切换显示状态和图标
            if (postList.style.display === 'none') {
                postList.style.display = 'block';
                icon.textContent = '-';
            } else {
                postList.style.display = 'none';
                icon.textContent = '+';
            }
        });
    });
});
</script>

3. 简单CSS美化（可选） #

给元素加一点基础样式，让交互更直观：

.tag-toggle {
    cursor: pointer;
    padding: 12px 15px;
    background: #f5f5f5;
    margin: 10px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 4px;
}

.tag-toggle h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
}

.toggle-icon {
    font-size: 22px;
    font-weight: bold;
    color: #666;
}

.tag-posts ul {
    margin: 0 0 20px 25px;
    padding: 0;
}

.tag-posts li {
    margin: 6px 0;
    line-height: 1.6;
}

关键说明 #

• 精准关联标签与文章：用tax_query替代旧写法，更符合WordPress查询规范，避免出错
• 默认隐藏逻辑：文章列表默认display: none，点击标签标题才展开
• 查询重置：每次循环后用wp_reset_postdata()重置，防止后续的全局the_post()出错
• 层级文章判断：如果你的reiseberichte不是子文章类型，一定要删掉post_parent参数，否则会查不到任何内容

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