javascript - 如何在按钮单击中展开树视图的所有节点？

Question

我通过使用li和ul格式化（不使用TreeView控件）创建了一个树视图。我想使用 JavaScript 扩展所有节点。请帮我。

我的树视图 CSS 如下：

#sitemap, #sitemap ul, #sitemap li
{
    margin: 0;
    padding: 0;
    list-style: none;
}
#sitemap
{
    background: url(../content/images/line1.gif) repeat-y;
}
#sitemap li
{
    line-height: 20px;
    margin-top: 1px;
    position: relative;
    width: 100%;
}
/* IE leaves a blank space where span is added so this is to avoid that */#sitemap li
{
    float: left;
    display: inline;
}
#sitemap li a
{
    padding-left: 3px;
}
#sitemap li a.but
{
    padding: 1px;
    border: solid 1px #c0c0c0;
    color: #080808;
    font-size: 7pt;
    margin: 2px;
    font-weight: normal;
    background-color: #efefef;
}
#sitemap li a.butGroup
{
    padding: 2px;
    border: solid 1px #888;
    color: #080808;
    font-size: 7pt;
    margin: 2px;
    background-color: #efefef;
    font-weight: bold;
}
#sitemap li span
{
    float: left;
    position: absolute;
    top: 5px;
    left: 5px;
    width: 13px;
    height: 13px;
    cursor: auto;
    font-size: 0;
}
#sitemap li span, #sitemap li span.collapsed
{
    background: url(../content/images/collapsed.gif) no-repeat 0 0;
}
#sitemap li span.expanded
{
    background: url(../content/images/expanded.gif) no-repeat 0 0;
}
#sitemap li span.dot
{
    background: url(../content/images/line2.gif) no-repeat -5px -5px;
}
#sitemap li ul
{
    margin-left: 25px;
    display: block;
    clear: both;
    background: #fff url(../content/images/line1.gif) repeat-y;
}
#sitemap li li
{
    background: url(../content/images/line2.gif) no-repeat 0 0;
}
#sitemap, #sitemap ul
{
    min-height: 1%;
}
#sitemap:after, #sitemap ul:after
{
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
#sitemap, #sitemap ul
{
    display: block;
}
#sitemap ul
{
    display: none;
}
#sitemap li div.butHolder
{
    clear: both;
    margin: 10px 3px 3px 30px;
}
#sitemap li input[type=text]
{
    width: 25px;
    padding: 2px;
    height: 14px;
    border: solid 1px #888;
    text-align: center;
}
div.LinkGroup
{
    width: 95%;
    margin-left: 20px;
    text-align: left;
    border: solid 1px #efefef;
    background-color: #fcfcfc;
}
div.LinkGroup div
{
    padding: 2px 1px 2px 1px;
    font-size: 8pt;
}
div.TR
{
    width: 100%;
    margin-left: 20px;
    text-align: left;
    clear: both;
}
div.TR div.TH, div.TR div.TD
{
    float: none;
    min-width: 50px;
    white-space: nowrap;
    padding: 3px;
}

JavaScript：

$(document).ready
(function () {
    if ($("#sitemap").length > 0) {

        $("#sitemap").find("li").each
        (
            function () {
                var $span = $("<span></span>");
                $(this).toggleClass("expanded");
                if ($(this).find("ul:first").length > 0) {

                    $(this).find("ul:first").css("display", "none");
                    $span.attr("class", "collapsed");

                    //
                    //if more link clicks of "Manage Links" page functionality than show it expanded.
                    //or delete the element show parent menu expanded
                    //
                    if (jQuery.trim($(this).find("ul:first").css("content")).indexOf('expanded') > -1) {
                        $span.removeAttr("class");
                        $span.attr("class", "expanded");
                        $(this).find("ul:first").css("display", "block");
                    }

                    $span.click(function () {
                        $(this).toggleClass("expanded");
                        $(this).parent("li").find("ul:first").slideToggle("normal");
                    }
                    )

                    $(this).append($span);
                }
                else {
                    $span.removeAttr("class");
                    $span.attr("class", "dot");
                    $(this).append($span);
                }
            }
        )
    }
}
)

////HTML结构

<ul id="sitemap">
    <li>
        <div class='TR'>
            <div class='TH'>
                <input type='checkbox' id='module_1' class='module' moduleid='1' />
                Start Configurations</div>
        </div>
        <ul style='display: none;'>
            <li>
                <div class='TR'>
                    <div class='TH'>
                        <input type='checkbox' name='menu_1' class='child' id='menu_1' moduleid='1' parent='0'
                            checked='checked' />
                        Customer Registration</div>
                </div>
            </li>
            <li>
                <div class='TR'>
                    <div class='TH'>
                        <input type='checkbox' name='menu_9' class='child' id='menu_9' moduleid='1' parent='0'
                            checked='checked' />
                        Configure Project</div>
                </div>
                <ul style='display: none;'>
                    <li>
                        <div class='TR'>
                            <div class='TH'>
                                <input type='checkbox' name='menu_10' class='child' id='menu_10' moduleid='1' parent='9'
                                    checked='checked' />
                                Search Customer</div>
                        </div>
                    </li>
                    <li>
                        <div class='TR'>
                            <div class='TH'>
                                <input type='checkbox' name='menu_12' class='child' id='menu_12' moduleid='1' parent='9'
                                    checked='checked' />
                                Test</div>
                        </div>
                        <ul style='display: none;'>
                            <li>
                                <div class='TR'>
                                    <div class='TH'>
                                        <input type='checkbox' name='menu_13' class='child' id='menu_13' moduleid='1' parent='12'
                                            checked='checked' />
                                        Test_Child</div>
                                </div>
                            </li>
                            <li>
                                <div class='TR'>
                                    <div class='TH'>
                                        <input type='checkbox' name='menu_14' class='child' id='menu_14' moduleid='1' parent='12'
                                            checked='checked' />
                                        Test_Child2</div>
                                </div>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
    <li>
        <div class='TR'>
            <div class='TH'>
                <input type='checkbox' id='module_2' class='module' moduleid='2' />
                Edit Configuration</div>
        </div>
        <ul style='display: none;'>
            <li>
                <div class='TR'>
                    <div class='TH'>
                        <input type='checkbox' name='menu_3' class='child' id='menu_3' moduleid='2' parent='0'
                            checked='checked' />
                        Edit Configuration</div>
                </div>
            </li>
            <li>
                <div class='TR'>
                    <div class='TH'>
                        <input type='checkbox' name='menu_11' class='child' id='menu_11' moduleid='2' parent='0'
                            checked='checked' />
                        Edit Customer Deatils</div>
                </div>
            </li>
        </ul>
    </li>
    <li>
        <div class='TR'>
            <div class='TH'>
                <input type='checkbox' id='module_3' class='module' moduleid='3' />
                Administration</div>
        </div>
        <ul style='display: none;'>
            <li>
                <div class='TR'>
                    <div class='TH'>
                        <input type='checkbox' name='menu_4' class='child' id='menu_4' moduleid='3' parent='0'
                            checked='checked' />
                        Project Stage</div>
                </div>
            </li>
            <li>
                <div class='TR'>
                    <div class='TH'>
                        <input type='checkbox' name='menu_5' class='child' id='menu_5' moduleid='3' parent='0'
                            checked='checked' />
                        Module Management</div>
                </div>
            </li>
            <li>
                <div class='TR'>
                    <div class='TH'>
                        <input type='checkbox' name='menu_6' class='child' id='menu_6' moduleid='3' parent='0'
                            checked='checked' />
                        Question Management</div>
                </div>
            </li>
            <li>
                <div class='TR'>
                    <div class='TH'>
                        <input type='checkbox' name='menu_7' class='child' id='menu_7' moduleid='3' parent='0'
                            checked='checked' />
                        Access Group</div>
                </div>
            </li>
            <li>
                <div class='TR'>
                    <div class='TH'>
                        <input type='checkbox' name='menu_8' class='child' id='menu_8' moduleid='3' parent='0'
                            checked='checked' />
                        User Creation</div>
                </div>
            </li>
        </ul>
    </li>
</ul>

Answer 1

//展开

<script type="text/javascript">
    function fun1() {
        if ($("#sitemap").length > 0) {

            $("#sitemap").find("li").each
            (
                function () {
                    var $span = $("<span></span>");
                    //$(this).toggleClass("expanded");
                    if ($(this).find("ul:first").length > 0) {
                        $span.removeAttr("class");
                        $span.attr("class", "expanded");
                        $(this).find("ul:first").css("display", "block");
                        $(this).append($span);
                    }

                }
            )
        }

    }

</script>

//折叠

<script type="text/javascript">
    function fun() {

        if ($("#sitemap").length > 0) {

            $("#sitemap").find("li").each
            (
                function () {
                    var $span = $("<span></span>");
                    if ($(this).find("ul:first").length > 0) {
                        $(this).find("ul:first").css("display", "none");
                        $span.attr("class", "collapsed");
                        $(this).append($span);
                    }

                }
            )
        }
    }

</script>