jQuery 简单实现菜单折叠效果！

没用到什么技术，只为了做个mark，以免忘记！

对于菜单的制作：

首先用到了圆角边框的div，圆角边框的实现可以参考：css生成圆角边框 

然后编写jQuery实现菜单的折叠和展开。

菜单html部分代码

<div class="left">
            <!--   ----圆角边框--------->
            <div id="xsnazzy1">
                <b class="xtop"><b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b class="xb4">
                </b></b>
                <div id="xboxcontent1">
                    <!--   ----内容--------->
                    <div class="M">
                        <div class="headline">
                            <span>开发资源</span><img src="images/sj.png" alt="" /></div>
                        <div class="list">
                            <div>
                               <a class="xboxcontent1_a" href="develop/developRight.aspx" target="frame">首页</a>
                            </div>
                        </div>
                    </div>
                    <div class="M">
                        <div class="headline">
                            <span>接入指南</span><img src="images/sj.png" alt="" /></div>
                        <div class="list">
                            <div>
                                <a class="xboxcontent1_a" href="develop/developRight.aspx" target="frame">移动客户端接入</a>
                            </div>
                        </div>
                    </div>
                    <div class="M">
                        <div class="headline">
                            <span>开发资源</span><img src="images/sj.png" alt="" /></div>
                        <div class="list">
                            <div>
                                <a class="xboxcontent1_a" href="develop/developRight.aspx" target="frame">应用开放API</a>
                            </div>
                            <div>
                                <a class="xboxcontent1_a" href="develop/developRight.aspx" target="frame">二维码API</a>
                            </div>
                            <div>
                                <a class="xboxcontent1_a" href="develop/developRight.aspx" target="frame">WO+分享API</a>
                            </div>
                        </div>
                    </div>
                    <div class="M">
                        <div class="headline">
                            <span>资源下载</span><img src="images/sj.png" alt="" /></div>
                        <div class="list">
                            <div>
                               <a class="xboxcontent1_a" href="develop/developRight.aspx" target="frame">SDK</a>
                            </div>
                            <div>
                               <a class="xboxcontent1_a" href="develop/developRight.aspx" target="frame">开发范例</a>
                            </div>
                            <div>
                               <a class="xboxcontent1_a" href="develop/developRight.aspx" target="frame">图形素材</a>
                            </div>
                        </div>
                    </div>
                    <div class="M">
                        <div class="headline">
                            <span>常见问题</span><img src="images/sj.png" alt="" /></div>
                        <div class="list lastlist">
                            <div>
                               <a class="xboxcontent1_a" href="develop/developRight.aspx" target="frame">常见问题</a>
                            </div>
                        </div>
                    </div>
                    <!--   ----------------->
                </div>
                <b class="xbottom"><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1">
                </b></b>
            </div>
        </div>

 

css样式代码

/*------------圆角边框css样式--------------*/
#xsnazzy h1, #xsnazzy h2, #xsnazzy p
{
    margin: 0 10px;
    letter-spacing: 1px;
}
#xsnazzy h1
{
    font-size: 2.5em;
    color: #fff;
}
#xsnazzy h2
{
    font-size: 2em;
    color: #06a;
    border: 0;
}
#xsnazzy p
{
    padding-bottom: 0.5em;
}
#xsnazzy h2
{
    padding-top: 0.5em;
}
.xtop, .xbottom
{
    display: block;
    background: transparent;
    font-size: 1px;
}
.xb1, .xb2, .xb3, .xb4
{
    display: block;
    overflow: hidden;
    background-color: #FBFBFB; /* 背景颜色 */
}
.xb1, .xb2, .xb3
{
    height: 1px;
}
.xb2, .xb3, .xb4
{
    /*    background: #FCFCFC;    背景颜色  */
    border-left: 1px solid #CCCCCC; /*   边框颜色  */
    border-right: 1px solid #CCCCCC; /*   边框颜色  */
}
.xb1
{
    margin: 0 5px;
    background: #CCCCCC; /*   边框颜色  */
}
.xb2
{
    margin: 0 3px;
    border-width: 0 2px;
}
.xb3
{
    margin: 0 2px;
}
.xb4
{
    height: 2px;
    margin: 0 1px;
}
#xboxcontent1
{
    height: 485px;
    display: block; /* background: #FCFCFC;   背景颜色  */
    border: 0 solid #CCCCCC; /*   边框颜色  */
    border-width: 0 1px;
}
#xsnazzy1
{
    width: 230px;
    margin: 5px 0px;
}
/********************************************************/

.left
{
    clear: both;
    float: left;
}
.headline
{
    cursor: pointer;
    width: 100%;
    height: 32px;
    background-color: #FBFBFB;
    border-bottom-style: inset;
    border-bottom-width: 1px;
    border-bottom-color: #cccccc;
}
.headline span
{
    position: relative;
    top: 2px;
    left: 15px;
    font-size: small;
    font-weight: bold;
}
.headline img
{
    position: relative;
    top: 5px;
    left: 140px;
}
.list div
{
    padding-left: 20px;
    font-size: small;
    height: 30px;
    line-height: 30px;
}
.list
{
    border-bottom-style: inset;
    border-bottom-color: #cccccc;
    border-width: 0.5px;
}
.lastlist
{
    border: none;
}
.xboxcontent1_a
{
    text-decoration: none;
    font-size: small;
    cursor: pointer;
    font-weight: normal;
    color: #1366B9;
}

jQuery 代码

<script type="text/javascript">
        $(document).ready(function () {
            $(".headline").click(function () {
                $(this).next().toggle("normal");
            });
        });
        $(document).ready(function () {
            $(".headline + div").hide();
        });
    </script>

 

转载于:https://www.cnblogs.com/wangchenran/archive/2012/09/18/2690760.html