duanlu9816 2019-07-04 05:19
浏览 61
已采纳

Bootstrap手风琴扩展全部

I have created an accordion from my database table where each row is a new card, the first column is the heading by which it expands and the remaining columns are the content of the collapsible part.

This works perfectly as expected, but was wondering if there is a way to try get a button outside of this that will expand them all?

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

展开全部

  • 写回答

1条回答 默认 最新

  • dongsuoying9059 2019-07-31 00:54
    关注

    This is what worked for me in the end:

    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');
        });
    }
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
编辑
预览

报告相同问题?

悬赏问题

  • ¥50 数据库开发问题求解答
  • ¥15 安装anaconda时报错
  • ¥20 如何用Python处理单元格内连续出现的重复词语?
  • ¥15 小程序有个导出到插件方式,我是在分包下引入的插件,这个export的路径对吗,我看官方文档上写的是相对路径
  • ¥20 希望有人能帮我完成这个设计( *ˊᵕˋ)
  • ¥100 将Intptr传入SetHdevmode()将Intptr传入后转换为DEVMODE的值与外部代码不一致
  • ¥50 基于ERA5数据计算VPD
  • ¥15 寻找杂志《Tornatzky, L. G., & Fleischer, M. (1990). The Processes of Technological Innovation. 》
  • ¥15 前台多人编辑时怎么让每个人保存刷新都互不干扰
  • ¥20 如何用Python删除单元格内连续出现的重复词?
手机看
程序员都在用的中文IT技术交流社区

程序员都在用的中文IT技术交流社区

专业的中文 IT 技术社区,与千万技术人共成长

专业的中文 IT 技术社区,与千万技术人共成长

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

客服 返回
顶部