Bootstrap 使用 Laravel 在表格内折叠

Question

我要做的是在用户点击引导折叠按钮后显示特定订单的详细信息结帐。

下面的图片将向您展示我期望的解决方案。

点击按钮前：

点击按钮后我想要的理想解决方案：

但是我得到的不是这个结果（这是我的问题，每个 td 元素只在一行中）：

HTML：

<div class="container">
<h1>My Orders</h1>
<h3>Total orders: {{$orders->total()}}</h3>
<table class="table table-striped">
    <thead>
    <tr>
        <th class="col-sm-4">Order Id</th>        
        <th class="col-sm-4">Total Paid</th>
        <th class="col-sm-2">Order Date/Time</th>
    </tr>    
    </thead>
    <tbody>
    @foreach($orders as $keyo => $item)
        <tr style="width: 100%;">
            <td>{{$item->id}} <button class="btn btn-success fa fa-eye" type="button" data-toggle="collapse" data-target="#viewmyorder{{$keyo}}" aria-expanded="false" aria-controls="collapseExample"></td>            
            <td>{{ number_format($item->total_paid,2,',','') }} &euro;</td>
            <td>{{$item->created_at}}</td>            
        </tr>     
        <tr id="viewmyorder{{$keyo}}" class="collapse" style="width: 100%;">
            <?php $orderitemtable = \App\OrderItem::all()->where('order_id', $item->id); ?>
            @foreach($orderitemtable as $theitems)
                <?php $findproducts = \DB::table('products')->select('id', 'name', 'code', 'price')->where('id', $theitems->product_id)->get(); ?>
            @foreach($findproducts as $pr)                          
                <td class="col-md-1">{{$pr->name}}</td>
                <?php $findphoto = \App\Photo::where('product_id', $pr->id)->get()->first(); ?>             
                <td class="col-md-4"><img src="/{{$findphoto->show_path}}"></td>                            
                <td class="col-md-1">{{$pr->code}}</td>
                <td class="col-md-1">{{$pr->price}}</td>            
                @if($theitems->order_condition == 0)
            <td class="col-md-2">Condition Order: Is in proccess</td>
            @elseif($theitems->order_condition == 1)
            <td class="col-md-2">Condition Order: We haven't enough items</td>
            @elseif($theitems->order_condition == 2)
            <td class="col-md-2">Condition Order: Order Completed</td>
            @endif  
            @if(($theitems->order_comments != null)== true)     
            <td class="col-md-3">{{$theitems->order_comments}}</td>
            @else
            <td class="col-md-3">No comments in this item</td>
            @endif          

            @endforeach    

            @endforeach

        </tr> 
    @endforeach

    </tbody>
</table>
</div>

Answer 1

您可以使用手风琴折叠表格行。 这是最好的例子。 http://www.bootply.com/fdTMNTiLis