如何在wordpress中打开第一个可折叠标签并关闭其余标签

mnowg1ta  于 2022-11-22  发布在  WordPress
关注(0)|答案(1)|浏览(162)

我在增加class="accordion-collapse collapse show时遇到了一个问题,这样第一个折叠标签应该打开和关闭。这是我如何做class="accordion-collapse collapse '.if($i++){.'show'.}.'"的。我在一个while循环中做它。

if ( $the_query->have_posts() ) {
        echo '<div class="accordion" id="accordionPanelsStayOpenExample">';
        while ( $the_query->have_posts() ) {
            $the_query->the_post();
            echo '<div class="accordion-item">';
            echo ' <h2 class="accordion-header" id="panelsStayOpen-heading'.get_the_ID().'">
                    <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapse'.get_the_ID().'" aria-expanded="true" aria-controls="panelsStayOpen-collapse'.get_the_ID().'">'
                      . get_the_title() . '
                    </button>
                  </h2>';
            echo '<div id="panelsStayOpen-collapse'.get_the_ID().'" class="accordion-collapse collapse '.($i++.'show'.).'"       aria-labelledby="panelsStayOpen-heading'.get_the_ID().'">
                  <div class="accordion-body">
                  '
                      .the_content() . '
                  </div>
                </div>';
        }
        echo '</div>';
        echo '</div>';
    } else {
        // no posts found
    }

我期待着第一个根据开放和其余关闭

vc9ivgsu

vc9ivgsu1#

试试这个:-已编辑。

<?php

$flag = true;
if ($the_query->have_posts()) {
    echo '<div class="accordion" id="accordionPanelsStayOpenExample">';
    while ($the_query->have_posts()) {
        $the_query->the_post();

        $show_class = $flag == true ? 'show' : '';
        $collapsed = $flag == true ? '' : 'collapsed';
        echo '<div class="accordion-item">';
        echo ' <h2 class="accordion-header" id="panelsStayOpen-heading' . get_the_ID() . '">
                    <button class="accordion-button '.$collapsed.'" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapse' . get_the_ID() . '" aria-expanded="true" aria-controls="panelsStayOpen-collapse' . get_the_ID() . '">'
            . get_the_title() . '
                    </button>
                  </h2>';
        echo '<div id="panelsStayOpen-collapse' . get_the_ID() . '" class="accordion-collapse collapse ' . $show_class . ' "       aria-labelledby="panelsStayOpen-heading' . get_the_ID() . '">
                  <div class="accordion-body">
                  '
            . the_content() . '
                  </div>
                </div>';
            $flag = false;
    }
    echo '</div>';
    echo '</div>';
} else {
    // no posts found
}

相关问题