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

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(" 展开");}})