Bootstrap 引导程序:折叠行:当有多行时更改展开-折叠图标

fnvucqvd  于 2022-12-07  发布在  Bootstrap
关注(0)|答案(1)|浏览(212)

我有一个带有一些折叠行的表。我想更改行上的展开-折叠图标展开-折叠我成功了1行。但当我尝试对多行执行此操作时,代码运行不好,并与其他行冲突
请帮助我如果有人有解决方案

var flag = true;
$('.togglebutton').click(function() {
        if (flag == true) {
            this.getElementsByTagName('img')[0].src = "../images/minus.png";
            flag = false;
        } else {
            this.getElementsByTagName('img')[0].src = "../images/plus.png";
            flag = true;
        }
    })

<tr class="clickable apply-max-width">
                            <td class="table-tr1-td1 togglebutton"><b aria-hidden="true" data-toggle="collapse" data-target="#accordion"><img src="../images/plus.png"/></b></td>

                            <td>abcd@gmail.com</td>
                            <td colspan="2">WD100165</td>
                            <td>2/1/2017</td>
                            <td>YES</td>
                            <td></td>
                        </tr>
                        <tr>
                            <td></td>
                            <td></td>
                            <td colspan="2">
                                <div id="accordion" class="accordion collapse data-found">

                                    <table class="table table-striped data-table-inner-disabled div-found">
                                        <thead>
                                            <tr>
                                                <th></th>
                                                <th class="">Application</th>
                                                <th class="">App Role</th>
                                                <th>Workflow Status</th>

                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td class="application-User-inv"><img src="../images/delete_1.png" class="img-responsive" /></td>
                                                <td class="application-User-inv">Portal</td>
                                                <td>User</td>
                                                <td>Pending Approval</td>
                                            </tr>
                                            <tr>
                                                <td class="application-User-inv"><img src="../images/delete_1.png" class="img-responsive" /></td>
                                                <td class="application-User-inv">SSR</td>
                                                <td>User</td>
                                                <td>Provisioned</td>
                                            </tr>
                                        </tbody>
                                    </table>

                                </div>
                            </td>
                            <td></td>
                            <td>

                            </td>
                            <td></td>
                        </tr>
                        <tr class="clickable apply-max-width">
                            <td class="table-tr1-td1 togglebutton"><b aria-hidden="true" data-toggle="collapse" data-target="#accordion2"><img src="../images/plus.png"/></b></td>

                            <td>abcd@gmail.com</td>
                            <td colspan="2">WD100165</td>
                            <td>2/1/2017</td>
                            <td>YES</td>
                            <td></td>
                        </tr>
                        <tr>
                            <td></td>
                            <td></td>
                            <td colspan="2">
                                <div id="accordion2" class="accordion collapse data-found">

                                    <table class="table table-striped data-table-inner-disabled div-found">
                                        <thead>
                                            <tr>
                                                <th></th>
                                                <th class="">Application</th>
                                                <th class="">App Role</th>
                                                <th>Workflow Status</th>

                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td class="application-User-inv"><img src="../images/delete_1.png" class="img-responsive" /></td>
                                                <td class="application-User-inv">Portal</td>
                                                <td>User</td>
                                                <td>Pending Approval</td>
                                            </tr>
                                            <tr>
                                                <td class="application-User-inv"><img src="../images/delete_1.png" class="img-responsive" /></td>
                                                <td class="application-User-inv">SSR</td>
                                                <td>User</td>
                                                <td>Provisioned</td>
                                            </tr>
                                        </tbody>
                                    </table>

                                </div>
                            </td>
                            <td></td>
                            <td>

                            </td>
                            <td></td>
                        </tr>
3yhwsihp

3yhwsihp1#

您需要存储每个折叠面板的标志状态。

$('.togglebutton').data("flag",1);
$('.togglebutton').click(function() {
    var $t = $(this);
    if ($t.data("flag") == 1) {
        $t.find('img')[0].src = "//placehold.it/40/?text=M";
        $t.data("flag",0);
    } else {
        $t.find('img')[0].src = "//placehold.it/40/?text=P";
        $t.data("flag",1);
    }
})

http://codeply.com/go/e49vQb4wE4

相关问题