动态显示手风琴，单击时第一个手风琴打开和关闭前一个手风琴答案

【问题标题】：Display the accordion dynamically and the first accordion open and close previous accordion when click动态显示手风琴，单击时第一个手风琴打开和关闭前一个手风琴
【发布时间】：2019-12-12 08:02:51
【问题描述】：

我正在从数据库中获取记录，我必须以手风琴的形式显示这些记录。我能够显示记录。现在我要做的是，我必须显示打开的第一个手风琴，然后单击打开时关闭前一个手风琴。

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

$('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;}

【问题讨论】：

这能回答你的问题吗？ Close accordions if other accordian is open in jquery
@Awais，我正在动态获取手风琴。我有对我有用但动态不起作用的静态代码
@Awais，我没有使用 jquery 手风琴。这是一个定制的手风琴。
这可能对stackoverflow.com/questions/30204588/…有帮助
@Awais，是的，在最后一个参考链接中可以帮助我解决我的问题，但不是 100%。只剩下一个问题，那就是如何显示第一个手风琴打开？现在所有的手风琴都显示关闭。

标签： javascript php jquery html css

【解决方案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++;

【讨论】：

我尝试了你的代码，但不是 100%，因为当我点击第二个手风琴时，活动类仍在显示。
我添加了
并添加了脚本 $(this).closest('.subserviceAcc' ).find('.ac-pane').removeClass('active');这解决了我的问题

【解决方案2】：

嗨，兄弟，在 ma div 中包装你的 while 后使用这个 jQuery 代码

PHP

<div class="accordion-wrapper-main">
    	<?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 } 
    ?>
    </div>

jQuery(".accordion-wrapper:nth-child(1) .other-hold").addClass("active");

【讨论】：