Question

我有html嵌套了DIV。而且它们又是可扩展的链接。我想介绍展开全部并折叠所有按钮，以便 1.展开全部 - 也将扩展内部（嵌套）DIV。 2.全部折叠 - 折叠所有DIV并仅保留第一个（父级）DIV

有人可以在这方面帮助我。我正在使用HTML和Javascript。

HTML：

<div ng-repeat="my in myGroups.group" class="myjobs">
            <accordion close-others="false">
                <accordion-group is-open="isopen">
                    <accordion-heading >
                        <i class="glyphicon" ng-class="{'glyphicon-chevron-down': isopen, 'glyphicon-chevron-right': !isopen}"></i> Job Group XYZASD
                    </accordion-heading>
                    <div class="row">
                        <div class="col-md-2">
                            <table class="table table-striped table-condensed ">
                                <tr><td>Name</td><td>{{my.name}}</td></tr>
                                <tr><td>Age</td><td>{{my.age}}</td></tr>
                                <tr><td>Location</td><td>{{my.location}}</td></tr>
                            </table>
                        </div>
                        <div class="col-md-10">
                            <div ng-repeat="myjobb in my.jobs.job">
                                <accordion close-others="false">
                                    <accordion-group is-open="isopen" ng-class="{'panel panel-danger': job.expired }">
                                        <accordion-heading>
                                            <i class="glyphicon" ng-class="{'glyphicon-chevron-down': isopen, 'glyphicon-chevron-right': !isopen}"></i>  Personal Details : {{job.id}} Description: {{job.desc}}
                                            <span ng-show="job.expired" class="glyphicon glyphicon-exclamation-sign" title="The job is expired"></span>
                                        </accordion-heading>
                                        <table class="table table-striped table-condensed">
                                            <tr><td>Designation</td><td>{{job.dsg}}</td></tr>
                                            <tr><td>Company</td><td>{{job.comp}}</td></tr>
                                            </table>
                                    </accordion-group>
                                </accordion>
                            </div>
                        </div>
                    </div>

我的js：

$('#expand-all').click(function() {
        $('.slide').slideDown();
        });
    $('#contract-all').click(function() {
        $('.slide').slideUp();
        });

问题是主DIV也来自浏览器中的html页面

使用Javascript扩展和折叠嵌套的DIV

0 个答案: