javascript - 帖子按年份按 Accordion 排序

Question

我有一个自定义的推荐帖子类型，但帖子很少。我正在尝试创建一个按年份显示帖子的 Accordion 。因此，当您单击年份时，它会显示该年的所有帖子(请参见下面的屏幕截图)。

我已经有点工作了，问题是当我点击年份时，它只显示那一年的一篇文章。这是代码 -> https://pastebin.com/3F98dcEU

            <?php get_header();?>
            <style>
            .accordion {
            background-color: #eee;
            color: #444;
            cursor: pointer;
            padding: 18px;
            width: 100%;
            border: none;
            text-align: left;
            outline: none;
            font-size: 15px;
            transition: 0.4s;
            margin-bottom:20px;
            }

            .active, .accordion:hover {
            background-color: #ccc; 
            }

            .panel {
            padding: 0 18px;
            display: none;
            background-color: white;
            overflow: hidden;
            }
            </style>
            <div class="container-fluid testimonial-header">
                <div class="row">
                    <div class="col-lg-12 text-center">
                        <h1>Testimonials</h1>
                    </div>
                </div>
            </div>
            <div class="container testimonial-content">
                <div class="block-1">
                    <h2 class="heading">Delivering Exceptional Customer Service</h2>
                    <p class="sub-heading">Being locally owned and operated, our objective is to provide exceptional client service delivered by our professional team. We take great pride in building homes that are beyond expectation, on time and on budget.</p>
                </div>
            </div>
            <div class="container-fluid py-5 archive-testimonial">
                <div class="container">
                    <div class="row">
                        <div class="col-lg-12">
                        <?php 
            global $wpdb;

            $posts = $wpdb->posts;

            //Get all unique years as "years" from posts where post type is equal to testimonials

            $sql = "SELECT DISTINCT(YEAR(`post_date`)) as years FROM $posts WHERE post_type = 'testimonials' ORDER BY years DESC"; //Get all post year list by DESC


            //Loop through all results and use date_query param https://codex.wordpress.org/Class_Reference/WP_Query#Date_Parameters


            $result = $wpdb->get_results($sql);

            foreach($result as $rs) { ?>
                <button class="accordion"><?php echo $rs->years ;?></button>
                <?php $args = array(
                    'post_type' => 'testimonials',
                    'post_per_page'=> -1,
                    'post_status' => 'publish',
                    'orderby'   => 'date',
                    'order' => 'DESC',
                    'date_query' => array(array(
                        'year'=> $rs->years,
                    ),),

                );

                $loop = new WP_Query($args);

                if($loop->have_posts()) {

                    while($loop->have_posts()) : $loop->the_post(); ?>
                        <div class="panel testimonial-grid-archive testimonial-loop-ah">
                            <div>
                                <?php 
                                    if(has_post_thumbnail()) { ?>
                                        <div style="text-center">
                                                    <div class="testimonial-image-aden" style="background-image:url('<?php echo the_post_thumbnail_url(); ?>');"> </div>
                                                </div>
                                            <?php } else { ?>
                                                <div class="testimonial-image-aden placeholder-testimonial-image"> </div>
                                            <?php } 
                                            ?>
                                        </div>
                            <div class="testimonial-content">
                                <p class="testimonial-highlight"><?php echo the_field('testimonial_highlight') ;?></p>
                                <p><img class="star-ratings-ah" src="<?php echo get_stylesheet_directory_uri(); ?>/assets/images/stars.png" alt=""></p>
                                <div class="testimonial-text-ah">" <?php the_field('testimonial_text'); ?> "</div>           
                                <p class="person-title-archive">- <?php the_title() ;?></p>
                            </div>
                        </div>


                    <?php endwhile;

                }
            }
                        ?>
                        </div>
                    </div>
                </div>
            </div>
            <script>
            var acc = document.getElementsByClassName("accordion");
            var i;

            for (i = 0; i < acc.length; i++) {
            acc[i].addEventListener("click", function() {
                this.classList.toggle("active");
                var panel = this.nextElementSibling;
                if (panel.style.display === "block") {
                panel.style.display = "none";
                } else {
                panel.style.display = "block";
                }
            });
            }
            </script>
            <?php get_footer();?>

您可以尝试使用内置帖子类型的代码，您就会明白我在说什么。

我的做法可能是完全错误的。

非常感谢任何帮助。

Answer 1

您的面板 div 位于 while 循环内，因此每个帖子都会重复它。您应该将其放在循环之外，因此每年仅生成一次。

更改此:

while($loop->have_posts()) : $loop->the_post(); ?>
    <div class="panel testimonial-grid-archive testimonial-loop-ah">
        <div>
            <?php 
                if(has_post_thumbnail()) { ?>
                    <div style="text-center">
                                <div class="testimonial-image-aden" style="background-image:url('<?php echo the_post_thumbnail_url(); ?>');"> </div>
                            </div>
                        <?php } else { ?>
                            <div class="testimonial-image-aden placeholder-testimonial-image"> </div>
                        <?php } 
                        ?>
                    </div>
        <div class="testimonial-content">
            <p class="testimonial-highlight"><?php echo the_field('testimonial_highlight') ;?></p>
            <p><img class="star-ratings-ah" src="<?php echo get_stylesheet_directory_uri(); ?>/assets/images/stars.png" alt=""></p>
            <div class="testimonial-text-ah">" <?php the_field('testimonial_text'); ?> "</div>           
            <p class="person-title-archive">- <?php the_title() ;?></p>
        </div>
    </div>
<?php endwhile;

对此:

<div class="panel testimonial-grid-archive testimonial-loop-ah">
    <?php while($loop->have_posts()) : $loop->the_post(); ?>
    <div>
        <?php 
        if(has_post_thumbnail()) { ?>
            <div style="text-center">
                <div class="testimonial-image-aden" style="background-image:url('<?php echo the_post_thumbnail_url(); ?>');"> </div>
            </div>
        <?php } else { ?>
            <div class="testimonial-image-aden placeholder-testimonial-image"> </div>
        <?php } ?>
        </div>
        <div class="testimonial-content">
            <p class="testimonial-highlight"><?php echo the_field('testimonial_highlight') ;?></p>
            <p><img class="star-ratings-ah" src="<?php echo get_stylesheet_directory_uri(); ?>/assets/images/stars.png" alt=""></p>
            <div class="testimonial-text-ah">" <?php the_field('testimonial_text'); ?> "</div>           
            <p class="person-title-archive">- <?php the_title() ;?></p>
        </div>
    <?php endwhile; ?>
</div>