Question

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

这完全可以按预期工作，但是想知道是否有办法尝试使按钮之外的按钮将其全部展开？

任何帮助或建议，将不胜感激。

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

Answer 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');
    });
}

Bootstrap手风琴将全部展开

1 个答案: