在页面的左侧创建一个折叠菜单是非常实用的，特别当列表菜单项目特别多的时候，使用折叠菜单可以使得页面更加实用、美观。JQuery在网页界面实现方面给开发人员提供了极大的便利，本文介绍一个用jquery实现的折叠菜单。

首先看看最终实现的效果图：

下面分别是html、css以及js代码：

html部分，整个菜单封装在一个class树形为content的div中，然后用ul列表作为一级菜单，然后再在li里面嵌套ul列表，做为二级菜单

<div class="content">
    <ul class="menu-one">
        <li class="firstChild">
            <div class="header">
                <span class="txt">一、HTML5基础教程</span>
                <span class="arrow"></span>
            </div>
            <ul class="menu-two">
                <li class="firstChild"><a href="#">HTML5基础教程01</a></li>
                <li><a href="#">HTML5基础教程02</a></li>
                <li><a href="#">HTML5基础教程03</a></li>
                <li><a href="#">HTML5基础教程04</a></li>
            </ul>
        </li>
        <li>
            <div class="header">
                <span class="txt">二、CSS3基础教程</span>
                <span class="arrow"></span>
            </div>
            <ul class="menu-two">
                <li class="firstChild"><a href="#">CSS3基础教程01</a></li>
                <li><a href="#">CSS3基础教程02</a></li>
                <li><a href="#">CSS3基础教程03</a></li>
                <li><a href="#">CSS3基础教程04</a></li>
            </ul>
        </li>
        <li>
            <div class="header">
                <span class="txt">三、JavaScript基础教程</span>
                <span class="arrow"></span>
            </div>
            <ul class="menu-two">
                <li class="firstChild"><a href="#">JavaScript基础教程01</a></li>
                <li><a href="#">JavaScript基础教程02</a></li>
                <li><a href="#">JavaScript基础教程03</a></li>
                <li><a href="#">JavaScript基础教程04</a></li>
            </ul>
        </li>
        <li>
            <div class="header">
                <span class="txt">四、PHP基础教程</span>
                <span class="arrow"></span>
            </div>
            <ul class="menu-two">
                <li class="firstChild"><a href="#">PHP基础教程01</a></li>
                <li><a href="#">PHP基础教程02</a></li>
                <li><a href="#">PHP基础教程03</a></li>
                <li><a href="#">PHP基础教程04</a></li>
            </ul>
        </li>
        <li>
            <div class="header">
                <span class="txt">五、IOS基础教程</span>
                <span class="arrow"></span>
            </div>
            <ul class="menu-two">
                <li class="firstChild"><a href="#">IOS基础教程01</a></li>
                <li><a href="#">IOS基础教程02</a></li>
                <li><a href="#">IOS基础教程03</a></li>
                <li><a href="#">IOS基础教程04</a></li>
            </ul>
        </li>
    </ul>
</div>

css部分主要是想对整个折叠菜单进行样式控制：

* {margin: 0; padding: 0;}
body {font: 14px/22px "Microsoft YaHei", arial, serif;}
a, a:link, a:visited {color: #ccc; text-decoration: none;}
      
.content {margin: 50px auto; width: 220px; height: auto;}
.content > ul {list-style: none;}
.content .menu-one > li {width: 220px; height: auto; overflow: hidden; border-top: 1px solid #888;}
.content .menu-one > li.firstChild {border: 0;}
.content .menu-one .header {height: 35px; background: #666; line-height: 34px; text-indent: 15px; cursor: pointer;}
.content .menu-one .header:hover,
.content .menu-one .menuOne-current {background: #777;}
.content .menu-one .header > span {display: block;}
.content .menu-one .header .txt {float: left; color: #fff;}
.content .menu-one .header .arrow {float: right; width: 35px; height: 35px; background: url(arrow-d.png) no-repeat center center;}
.content .menu-two {display: none; width: 220px; height: auto;}
.content .menu-two li {width:220px; height:35px; background: #eee; border-top: 1px solid #ccc; line-height: 34px; text-indent: 40px;}
.content .menu-two li.firstChild {border: 0;}
.content .menu-two li a {display: block; color: #888;}
.content .menu-two li:hover,
.content .menu-two li.menuTwo-current {background: #fff;}
      
.content .menu-show .header {background: #777;}
.content .menu-show .header .arrow {background-image: url(arrow-u.png);}

js部分，通过JQuery的选择器$(".menu-one > li > .header")为每一个父级菜单绑定了click事件响应函数，在函数中通过判断该菜单对应的子菜单是否显示进行不同的处理，使用slideUp实现了动画效果。

$(document).ready(function () {
    var aMenuOneLi = $(".menu-one > li");
    var aMenuTwo = $(".menu-two");
    $(".menu-one > li > .header").each(function (i) {
        $(this).click(function () {
            if ($(aMenuTwo[i]).css("display") == "block") {
                $(aMenuTwo[i]).slideUp(300);
                $(aMenuOneLi[i]).removeClass("menu-show")
            } else {
                for (var j = 0; j < aMenuTwo.length; j++) {
                    $(aMenuTwo[j]).slideUp(300);
                    $(aMenuOneLi[j]).removeClass("menu-show");
                }
                $(aMenuTwo[i]).slideDown(300);
                $(aMenuOneLi[i]).addClass("menu-show")
            }
        });
    });
});

注意：需要在这段js代码执行之前引入JQuery库。

通过以上步骤，一个完整的折叠菜单就完成了。JQuery在Web页面实现过程中为开发人员提供了极大的便利，使得程序员只需要很少的工作即可以实现复杂、精美的效果。

参考文章：http://beyondweb.cn/article_detail.php?id=216