Javascript制作伸缩的二级菜单

1.javascript方法

<style>
        #navigation {
            width: 200px;
            font-family: Arial;
        }
        #navigation > ul {
            list-style-type: none;
            /* 不显示项目符号 */

            margin: 0px;
            padding: 0px;
        }
        #navigation > ul > li {
            border-bottom: 1px solid #ED9F9F;
            /* 添加下划线 */
        }
        #navigation > ul > li > a {
            display: block;
            /* 区块显示 */

            padding: 5px 5px 5px 0.5em;
            text-decoration: none;
            border-left: 12px solid #711515;
            /* 左边的粗红边 */

            border-right: 1px solid #711515;
            /* 右侧阴影 */
        }
        #navigation > ul > li > a:link,
        #navigation > ul > li > a:visited {
            background-color: #c11136;
            color: #FFFFFF;
        }
        #navigation > ul > li > a:hover {
            /* 鼠标经过时 */

            background-color: #990020;
            /* 改变背景色 */

            color: #ffff00;
            /* 改变文字颜色 */
        }
        /* 子菜单的CSS样式 */

        #navigation ul li ul {
            list-style-type: none;
            margin: 0px;
            padding: 0px 0px 0px 0px;
        }
        #navigation ul li ul li {
            border-top: 1px solid #ED9F9F;
        }
        #navigation ul li ul li a {
            display: block;
            padding: 3px 3px 3px 0.5em;
            text-decoration: none;
            border-left: 28px solid #a71f1f;
            border-right: 1px solid #711515;
        }
        #navigation ul li ul li a:link,
        #navigation ul li ul li a:visited {
            background-color: #e85070;
            color: #FFFFFF;
        }
        #navigation ul li ul li a:hover {
            background-color: #c2425d;
            color: #ffff00;
        }
        #navigation ul li ul.myHide {
            /* 隐藏子菜单 */

            display: none;
        }
        #navigation ul li ul.myShow {
            /* 显示子菜单 */

            display: block;
        }
    </style>

        <script type="text/javascript">
            function changemenu() {
                //通过父元素li，找到兄弟元素ul
                var bList = this.parentNode.getElementsByTagName("ul")[0];
                //CSS交替更换来实现显、隐
                if (bList.className == "myHide")
                    bList.className = "myShow";
                else
                    bList.className = "myHide";
            }
            window.onload = function() {
                var oList = document.getElementById("listUL");
                var nList = oList.childNodes; //子元素
                var sList;
                for (var i = 0; i < nList.length; i++) {
                    //如果子元素为li，且这个li有子菜单ul
                    if (nList[i].tagName == "LI" && nList[i].getElementsByTagName("ul").length) {
                        slist = nList[i].firstChild; //找到超链接
                        slist.onclick =  changemenu; //动态添加点击函数
                    }
                }
            }
        </script>

        <div>
            <div id="navigation">
                <ul id="listUL">
                    <li><a href="#">Home</a>
                    </li>
                    <li><a href="#">News</a>
                        <ul class="myHide">
                            <li><a href="#">Lastest News</a>
                            </li>
                            <li><a href="#">All News</a>
                            </li>
                        </ul>
                    </li>
                    <li><a href="#">Sports</a>
                        <ul class="myHide">
                            <li><a href="#">Basketball</a>
                            </li>
                            <li><a href="#">Football</a>
                            </li>
                            <li><a href="#">Volleyball</a>
                            </li>
                        </ul>
                    </li>
                    <li><a href="#">Weather</a>
                        <ul class="myHide">
                            <li><a href="#">Today's Weather</a>
                            </li>
                            <li><a href="#">Forecast</a>
                            </li>
                        </ul>
                    </li>
                    <li><a href="#">Contact Me</a>
                    </li>
                </ul>
            </div>

        </div>

2.附jQuery方法

<script type="text/javascript">
            $(function() {
                //找到所有li标记中包含的ul标记
                //然后找到它的前一个标记（即<a>），并添加click()事件
                $("li").find("ul").prev().click(function() {
                    //点击<a>时让它后面的兄弟（即<ul>）切换CSS样式
                    $(this).next().toggleClass("myHide");
                });
            });
        </script>

3.附jQuery toggle()方法

<script language="javascript">
$(function(){
    $("li").find("ul").prev().click(function(){
        $(this).next().toggle();
    });
    $("li:has(ul)").find("ul").hide();
});
</script>