javascript - 更改可扩展 View 中的图标

Question

我有一个具有可展开 View 的表格。单击加号它会扩展，但我希望将加号更改为减号(fa fa-plus to fa fa-minus)当 View 处于扩展形式时返回加号它是压缩形式，谁能告诉我怎么做(代码@fiddle)

 <script>
    $(document).ready(function(){
        $("#report tbody tr:odd td:first-child").click(function(){
            $this=$(this);
            $this.parent().next("tr").toggle();
            $this.find(".arrow").toggleClass("up");
        });
    });
        </script>

       <table id="report" border="1" style="width:100%" >
        <tr>
            <th> First </th>
            <th> Second </th>
            <th> Third </th>
        </tr>

        <tr>
             <td><i class="fa fa-plus"></i></td>
             <td>1</td>
             <td>1</td>
        </tr>   
        <tr>
            <td colspan="10">
                dummy text 1<br>
                dummy text 1<br>
                dummy text 1<br>
            </td>
        </tr>   
    </table>

Answer 1

如果你想要一个简单的方法，那么使用具有属性 display:none 和 display:block 的图标和通用类，然后切换它们。

参见action