在MVC中折叠树视图

Question

我在MVC中使用javascrip进行树视图： 脚本： -

$(document).ready(function() {
    $('.tree > ul').attr('role', 'tree').find('ul').attr('role', 'group');
    $('.tree').find('li:has(ul)').addClass('parent_li').attr('role', 'treeitem').find(' > span').attr('title', 'Collapse this branch').on('click', function (e) {
        var children = $(this).parent('li.parent_li').find(' > ul > li');
        if (children.is(':visible')) {
            children.hide('fast');
            $(this).attr('title', 'Expand this branch').find(' > i').addClass('icon-plus-sign').removeClass('icon-minus-sign');
        }
        else {
            children.show('fast');
            $(this).attr('title', 'Collapse this branch').find(' > i').addClass('icon-minus-sign').removeClass('icon-plus-sign');
        }
        e.stopPropagation();
    });
});

MVC中的Html代码：

<div class="container-fluid" style="">
    <div class="row-fluid">
        <section role="main" class="span12">
            <div class="tree well">
                <ul>
                    <li>
                                    <span id="item-2" class="">
                                        <i class="icon-plus-sign getChild" id="parentClick-2"></i>
                                            <img src="/Content/img/man.png" class="img-thumbnail img-family" alt="Cinque Terre" style="width:130px;height:130px">
                                        <h6 class="family-h2-name">
                                            Dhiren Patel<br />
                                            dhin@123.com<br />
                                            9974745511 <br />

                                            <a href="/FamilyTree/Add/2" id="btnAdd" class="btn-u btn-u-orange btnAdd btnHref" type="button" data-toggle="tooltip" data-placement="bottom" title="Add" >
                                                <i class="fa fa-plus" id="btnAdd"></i>
                                            </a>
                                            <a href="/FamilyTree/Add/2" id='btnEdit' class='btn-u btn-u-orange btnHref' type='button' data-toggle='tooltip' data-placement='bottom' title='Edit'>
                                            <i class='fa fa-pencil' id='btnEdit'></i>
                                            </a>
                                            <a id='btnDelete-2' class='btn-u btn-u-orange btnHref btnDelete' data-toggle='tooltip' data-placement='bottom' title='Delete'>
                                            <i class='fa fa-trash-o' id='btnDelete'></i>
                                            </a>
                                        </h6>
                                    </span>
                                    <ul id="child-2"></ul>
                                    <span id="item-4" class="">
                                        <i class="icon-plus-sign getChild" id="parentClick-4"></i>
                                            <img src="/Content/img/man.png" class="img-thumbnail img-family" alt="Cinque Terre" style="width:130px;height:130px">
                                        <h6 class="family-h2-name">
                                            akshay mistry<br />
                                            akshay@mistri.com<br />
                                            9977886655 <br />

                                            <a href="/FamilyTree/Add/4" id="btnAdd" class="btn-u btn-u-orange btnAdd btnHref" type="button" data-toggle="tooltip" data-placement="bottom" title="Add" >
                                                <i class="fa fa-plus" id="btnAdd"></i>
                                            </a>
                                            <a href="/FamilyTree/Add/4" id='btnEdit' class='btn-u btn-u-orange btnHref' type='button' data-toggle='tooltip' data-placement='bottom' title='Edit'>
                                            <i class='fa fa-pencil' id='btnEdit'></i>
                                            </a>
                                            <a id='btnDelete-4' class='btn-u btn-u-orange btnHref btnDelete' data-toggle='tooltip' data-placement='bottom' title='Delete'>
                                            <i class='fa fa-trash-o' id='btnDelete'></i>
                                            </a>
                                        </h6>
                                    </span>
                                    <ul id="child-4"></ul>
                                    <span id="item-13" class="">
                                        <i class="icon-plus-sign getChild" id="parentClick-13"></i>
                                        <img src="/Content/img/FamilyTree/china-red-seamless-background-pattern.jpg" class="img-thumbnail img-family" alt="Cinque Terre" style="width:130px;height:130px">
                                        <h6 class="family-h2-name">
                                            daks patel<br />
                                            dkpatel@123.com<br />
                                            7867564534 <br />

                                            <a href="/FamilyTree/Add/13" id="btnAdd" class="btn-u btn-u-orange btnAdd btnHref" type="button" data-toggle="tooltip" data-placement="bottom" title="Add" >
                                                <i class="fa fa-plus" id="btnAdd"></i>
                                            </a>
                                            <a href="/FamilyTree/Add/13" id='btnEdit' class='btn-u btn-u-orange btnHref' type='button' data-toggle='tooltip' data-placement='bottom' title='Edit'>
                                            <i class='fa fa-pencil' id='btnEdit'></i>
                                            </a>
                                            <a id='btnDelete-13' class='btn-u btn-u-orange btnHref btnDelete' data-toggle='tooltip' data-placement='bottom' title='Delete'>
                                            <i class='fa fa-trash-o' id='btnDelete'></i>
                                            </a>
                                        </h6>
                                    </span>
                                    <ul id="child-13"></ul>
                    </li>
                </ul>
            </div>
        </section>
    </div>

  </div>

问题是： - 我想折叠ROOT节点的所有子节点：级别2,3,4,5 ...（根是1级节点）想要树视图星。如何折叠和展开特定的选定根。