Question

我有一个具有可扩展视图的表。点击一个加号它会扩展，但我希望当视图处于展开形式时将加号更改为减号（fa fa-plus to fa fa-minus），当它处于压缩形式时返回加号，有人可以告诉我们如何这样做（代码@ 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

Answer 2

将一些类应用于父级以确定何时扩展元素。对于展开的元素隐藏加上图标和显示减号图标，反之亦然。

＆＃13;

$(document).ready(function() {
  $('.toggler').click(function() {
    $(this).toggleClass('active');
  });
});

＆＃13;

.toggler {
  padding: 3px 5px;
  border: 1px solid #ddd;
  float: left;
}
.icon-minus {
  display: none;
}
.active .icon-plus {
  display: none;
}
.active .icon-minus {
  display: inline;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="toggler">
  <span class="icon icon-plus">+</span>
  <span class="icon icon-minus">-</span>
</div>

＆＃13;

Answer 3

根据我的观察，我没有找到任何element类arrow，但我认为您需要在fa-plus和fa-minus之间切换collapse }和expand。所以你可以实现如下：

$(document).ready(function(){
     $("#report tbody tr:odd td:first-child").click(function(){
         $this=$(this);
         $this.parent().next("tr").toggle();
         $this.find("i").toggleClass("fa-plus fa-minus");
         //you find the "i" element in td and toggle its fa-plus and fa-minus
    });
});

<强> DEMO

在可扩展视图中更改图标

3 个答案: