js 내 비게 이 션 계층 의 현 은 실현

<div class="navigation">

                            <ul id="nav">

                                <li><span>

                                    <img id="img_0" onclick="nav_expand(this.id)" src="images/dian2.jpg" /></span>    

                                    <ul id="u_0">

                                        <li>    </li>

                                        <li>    </li>

                                        <li>    </li>

                                        <li>    </li>

                                    </ul>

                                </li>

                                <li><span>

                                    <img id="img_1" onclick="nav_expand(this.id)" src="images/dian2.jpg" /></span>    

                                    <ul id="u_1">

                                        <li>    </li>

                                        <li>    </li>

                                        <li>    </li>

                                        <li>    </li>

                                        <li>    </li>

                                    </ul>

                                </li>

                                <li><span>

                                    <img id="img_2" onclick="nav_expand(this.id)" src="images/dian2.jpg" /></span>    

                                    <ul id="u_2">

                                        <li>    </li>

                                        <li>    </li>

                                        <li>    </li>

                                        <li>    </li>

                                        <li>    </li>

                                    </ul>

                                </li>

                                <li><span>

                                    <img id="img_3" onclick="nav_expand(this.id)" src="images/dian2.jpg" /></span>    

                                    <ul id="u_3">

                                        <li>    </li>

                                        <li>    </li>

                                        <li>    </li>

                                        <li>    </li>

                                        <li>    </li>

                                    </ul>

                                </li>

                                <li><span>

                                    <img id="img_4" onclick="nav_expand(this.id)" src="images/dian2.jpg" /></span>    

                                    <ul id="u_4">

                                        <li>    </li>

                                        <li>    </li>

                                        <li>    </li>

                                        <li>    </li>

                                        <li>    </li>

                                    </ul>

                                </li>

                                <li><span>

                                    <img id="img_5" onclick="nav_expand(this.id)" src="images/dian2.jpg" /></span>    

                                    <ul id="u_5">

                                        <li>    </li>

                                        <li>    </li>

                                        <li>    </li>

                                        <li>    </li>

                                        <li>    </li>

                                    </ul>

                                </li>

                                <li><span>

                                    <img id="img_6" onclick="nav_expand(this.id)" src="images/dian2.jpg" /></span>    

                                    <ul id="u_6">

                                        <li>    </li>

                                        <li>    </li>

                                        <li>    </li>

                                        <li>    </li>

                                        <li>    </li>

                                    </ul>

                                </li>

                                <li id="bottom_li"></li>

                            </ul>

                        </div>

var nav_li_ul_items = $get("nav").getElementsByTagName("ul");

function nav_expand(id) {



    var ul_id = "u" + id.substring(id.indexOf("_"));



    for (var i = 0; i < nav_li_ul_items.length; i++) {

        if (nav_li_ul_items[i].id == ul_id) {

            nav_li_ul_items[i].style.display = "block";

            $get("img_" + i).src = "images/dian1.jpg";

        } else {

            nav_li_ul_items[i].style.display = "none";

            $get("img_" + i).src = "images/dian2.jpg";

        }



    }

}