Question

我正在从数据库中获取记录，并且必须手风琴显示这些记录。我能够显示记录。现在我正在做的是，我必须显示第一个手风琴处于打开状态，单击时，如果打开则将其关闭。

当前，在页面上加载所有显示为关闭的手风琴，当我单击手风琴时，它不会关闭前一个手风琴。

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 ++;

Answer 2

您好，兄弟们在ma div中停留了一段时间后，使用此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>

JS

jQuery（“。accordion-wrapper：nth-child（1）.other-hold”）。addClass（“ active”）;

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

2 个答案: