点击列表一行数据，在该行下方显示详情

1.HTML 部分  点击展开  把 class='tr2' 部分显示出来，同时展开变成收起

<tr style="background-color:#E7F6FD">
                    <td ><i class="fa fa-caret-square-o-down fa-2x red hand liopen"> 展开</i></td>
                    <td>2020-05-18 04:31:49</td>
                    <td>202005181631493149899</td>
                    <td>test4</td>
                   <td>3.00</td>
                    <td></td>
                    <td>1.00</td>                   
                    <td>未支付</td>
                    <td>1900-01-01 12:00:00</td>                    
                    <td>  </td>

                </tr>
<tr class="tr2" style="display:none">
                    <td colspan="10">
                        <table style="border-bottom: 1px solid gray; width: 100%">
                        <thead>                       
                            <tr style="background-color: gainsboro">
                                <th>分类名称</th>
                                <th>产品名称</th>
                                <th>单价</th>
                                <th>数量</th>
                            </tr>
                        </thead>
                        <tbody>    
                            <tr>
                                <td>测试分类1</td>
                                <td>234</td>
                                <td>3.00</td>
                                <td>1</td>                           
                            </tr>                           
                        </tbody>
                        </table>
                    </td>
 </tr>

效果图如下显示

2.相关js代码

$(".liopen").click(function () {
    if ($(this).hasClass("fa-caret-square-o-down")) {                    
       $(this).parent().parent().next(".tr2").fadeToggle();// 透明度变化 淡入淡出
       $(this).removeClass("fa-caret-square-o-down").addClass("fa-caret-square-o-up").html(" 收起");                   
    } else {
       $(this).parent().parent().next(".tr2").fadeToggle();// 透明度变化 淡入淡出
       $(this).removeClass("fa-caret-square-o-up").addClass("fa-caret-square-o-down").html(" 展开");
                }
    })