第一个手风琴面板打开

Question

我似乎不知道如何让我的第一个手风琴面板自动打开。问题是，我无法将其设置为活动状态，因为它正在显示来自数据库的 PHP 数据，因此如果我将 div 设置为 "active-panel"，它将应用于所有面板。任何帮助都会很棒！澄清一下，我只是想让第一个自动打开。代码：

$('.panel-holder').click(function () {
        $(this).closest('.accordion').find('.panel-holder').removeClass('active-panel');
        $(this).addClass('active-panel');

PHP

echo "<div class='panel-holder'>

    <div class='panel-title'>". $results['job_title'] ."
        <i class='icon arrow_carrot-down'></i>
    </div>

    <div class='panel-content'>
        <p class='lead'>". $results['job_summary'] ."</p>
        <p>". $results['job_description'] ."</p>
    </div>

    </div><!--end of individual accordian panel-->";

Answer 1

只需将 "active-panel" class 添加到 PHP 中的第一项即可。那些是循环生成的吗？只需创建一个在循环的每个运行中增加的计数器变量。如果此计数器 == 1（如果您想从 0 开始，则为 0 ;)）将 css class 添加到您的标记中。

Answer 2

最终创建了以下解决方案：

$('.panel-holder').each(function () {
        $(this).closest('.accordion').find('.panel-holder:first').addClass('active-panel');

    });

第一个手风琴面板打开

First accordion panel open

html

javascript

php

accordion