自己编写jQuery插件之菜单折叠

浏览数：19 / 时间：2015年06月09日

　　菜单折叠这个功能很简单，很多人都有写过，只因它在项目中使用实在是太频繁了。代码就那么几行，没什么讲的，这里只是将其封装成插件而已。

　　Html代码如下：

<div class="box">
        <p>菜单一</p>
        <ul>
            <li><a>1111</a></li>
            <li><a>1111</a></li>
            <li><a>1111</a></li>
        </ul>
        <p>菜单二</p>
        <ul>
            <li><a>2222</a></li>
            <li><a>2222</a></li>
            <li><a>2222</a></li>
        </ul>
        <p>菜单三</p>
        <ul>
            <li><a>3333</a></li>
            <li><a>3333</a></li>
            <li><a>3333</a></li>
        </ul>
</div>

　　插件实现代码如下：

(function ($) {
            $.fn.Fold = function (options) {
                //默认参数设置
                var settings = {
                    speed: 300 //折叠速度(值越大越慢)
                }

                //不为空则合并参数
                if (options)
                    $.extend(settings, options);

                //为每个p元素绑定点击事件
                $("> p", this).each(function () {
                    $(this).bind("click", function () {
                        $(this).next("ul").slideToggle(settings.speed);
                    });
                });

                //默认第一个展开，其它折叠
                $("> ul", this).hide().first().show();

                //遵循链式原则
                return this.each(function () { });
            }
})(jQuery);

这里就不作讲解了，注释都写明了。

示例DEMO如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        *{padding:0;margin:0;}
        ul,ul li{ list-style:none;}
        .box{ width:250px; margin:50px auto; border:1px solid gray;}
        .box p{ background-color: Green;color: white;cursor: pointer;font-weight: bold;
        line-height: 40px;padding-left: 15px;}
    </style>
</head>
<body>
    <div class="box">
        <p>菜单一</p>
        <ul>
            <li><a>1111</a></li>
            <li><a>1111</a></li>
            <li><a>1111</a></li>
        </ul>
        <p>菜单二</p>
        <ul>
            <li><a>2222</a></li>
            <li><a>2222</a></li>
            <li><a>2222</a></li>
        </ul>
        <p>菜单三</p>
        <ul>
            <li><a>3333</a></li>
            <li><a>3333</a></li>
            <li><a>3333</a></li>
        </ul>
    </div>

    <script src="../js/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script src="../js/jquery.similar.Fold.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(".box").Fold();
    </script>
</body>
</html>