Bootstrap 手风琴展开全部答案

【问题标题】：Bootstrap accordion expand allBootstrap 手风琴展开全部
【发布时间】：2019-11-15 06:00:30
【问题描述】：

我从我的数据库表中创建了一个手风琴，其中每一行都是一张新卡片，第一列是它展开的标题，其余列是可折叠部分的内容。

这完全符合预期，但想知道是否有办法尝试在此之外获取一个按钮以将它们全部展开？

$i = '0';

$var = '<div id="accordion">';

$sql = "SELECT * FROM table";
$stmt = DB::run($sql);
while ($row = $stmt->fetch(PDO::FETCH_ASSOC)){

    $col1 = $row['col1'];
    $col2 = $row['col2'];
    $col3 = $row['col3'];
    $col4 = $row['col4'];

    $i++;

    $var .= '<div class="card">';

        $var .= '<div class="card-header" id="heading'.$i.'">';
            $var .= '<button class="btn btn-link" data-toggle="collapse" data-target="#collapse'.$i.'" aria-expanded="true" aria-controls="collapse'.$i.'">';
                $var .= $col1;
            $var .= '</button>';
        $var .= '</div>';

        $var .= '<div id="collapse'.$i.'" class="collapse" aria-labelledby="heading'.$i.'" data-parent="#accordion">';
            $var .= '<div class="card-body">';
                $var .= $col2;
                $var .= $col3;
                $var .= $col4;
            $var .= '</div>';
        $var .= '</div>';

    $var .= '</div>';
}

$var .= '</div>';

【问题讨论】：

如果我理解正确，您正在寻找具有扩展所有卡片功能的按钮？
@bobibobi 是的，没错
可以用jquery $.each函数api.jquery.com/each
当点击“全部展开”按钮时，您需要添加“显示”类和“折叠”以打开所有手风琴
ARIA 属性告诉屏幕阅读器和其他辅助技术等工具，哪些项目当前处于“活动状态”，因此在面向最终用户的场景中，这些项目也应该相应地进行修改。但是，如果这只是针对您自己的自定义后端，那么可访问性可能不是什么大问题，没错。

标签： php sql bootstrap-4

【解决方案1】：

这最终对我有用：

function expand_all(){
    $('.collapse').each(function(){
        $(this).addClass('show');
    });
    $('.accordion-btn').each(function(){
        $(this).attr('aria-expanded','true');
    });
}
function collapse_all(){
    $('.collapse').each(function(){
        $(this).removeClass('show');
    });
    $('.accordion-btn').each(function(){
        $(this).attr('aria-expanded','false');
    });
}

【讨论】：