javascript - 动态显示 Accordion ，单击时第一个 Accordion 打开和关闭前一个 Accordion

Question

我正在从数据库中获取记录，我必须在 Accordion 中显示这些记录。我能够显示记录。现在我正在做的是，我必须显示第一个打开的 Accordion ，然后在单击然后关闭上一个打开的 Accordion 。

目前，在页面加载时，所有 Accordion 都显示关闭，当我点击 Accordion 时，它并没有关闭前一个 Accordion 。

js

$('body').on('click', '.ac-title', function(e) {
    $('.accordion-wrapper').find('.ac-content').stop().slideUp();
    $(this).closest('.accordion-wrapper').find('.ac-content').stop().slideToggle();
});

php

while ($stmt->fetch()) {   ?>
    <div class="accordion-wrapper">
    <div class="ac-pane">
        <a href="javascript:void(0)" class="ac-title" data-accordion="true">
         <span><?php echo $cat_name;?></span>
        <i></i>
        </a>
        <div class="ac-content">
            <!--contnet-->
        </div>
    </div>
 </div>
    <?php } ?>

CSS

.accordion-wrapper{max-width: 500px;width: 100%;margin: auto;text-align: left;border-bottom: 2px solid #fff;}
.ac-pane { margin-bottom: 15px;  color:#000;border-bottom: 1px solid #fff;}
.ac-pane:last-child { margin-bottom: 0;border-bottom:none; }
.ac-content { display: none; }
.ac-title {color: #000;display: block;padding: 12px;background-color: #fc5c49;font-size: 20px;position: relative;}
.ac-title span{color: #fff;}
.ac-title img {float: right;font-size: 20px;width: 30px;}
.ac-title i:before {content: ""; background-image: url('../images/plus.png');
width: 20px;height: 20px;background-size: cover;background-repeat: no-repeat;background-position: center;position: absolute;right: 30px;top: 15px;}
.active .ac-title i:before {content: ""; background-image: url('../images/minus.png');
width: 20px;height: 20px;background-size: cover;background-repeat: no-repeat;background-position: center;position: absolute; right: 30px;top: 15px;}
.ac-content {margin-top: -1px;padding: 15px;font-size: 17px;}

Answer 1

@updatedQuestion:要仅显示第一行，您可以这样做:

$count = 0;
while ($stmt->fetch()) {?>    
<div class="accordion-wrapper <?php if(!$count) echo 'active'; ?>">
<div class="ac-pane">
    <a href="javascript:void(0)" class="ac-title" data-accordion="true">
     <span><?php echo $cat_name;?></span>
    <i></i>
    </a>
    <div class="ac-content">
        <!--contnet-->
    </div>
</div></div>

在最后关闭 php 标签之前:$count++;