第一个手风琴面板打开答案

【问题标题】：First accordion panel open第一个手风琴面板打开
【发布时间】：2015-01-26 13:15:08
【问题描述】：

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

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

【问题讨论】：

标签： javascript php html accordion

【解决方案1】：

只需将“活动面板”类添加到 PHP 中的第一项即可。那些是循环生成的吗？只需创建一个计数器变量，该变量在循环的每次运行中都会增加。如果此计数器 == 1（如果您想以 0 开头，则为 0；））将 css 类添加到您的标记中。

【讨论】：

感谢@Markus Müller！不幸的是，我的 PHP 技能还不足以管理它。我有点希望会有某种简单的panel-holder:first css 解决方案。哈哈
这也可以。在您的面板支架周围添加一个包装器。 #wrapper div.panel-holder:firstchild 应该可以访问第一个但是我的 PHP 比我的 CSS 好得多 ;-)
谢谢！我会试一试的。希望我的 PHP 比我的 CSS 更好。不幸的是，它们大致相同，这对任何一个都没有多大意义；）干杯

【解决方案2】：

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

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

    });

【讨论】：