自己編寫jQuery插件之菜單折疊

昵稱10504424 2014-08-07

展開全文

菜單折疊這個功能很簡單，很多人都有寫過，只因它在項目中使用實在是太頻繁了。代碼就那么幾行，沒什么講的，這里只是將其封裝成插件而已。

<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>

　　插件實現(xiàn)代碼如下：

(function ($) {
            $.fn.Fold = function (options) {
                //默認參數(shù)設(shè)置
                var settings = {
                    speed: 300 //折疊速度(值越大越慢)
                }

                //不為空則合并參數(shù)
                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();

                //遵循鏈?zhǔn)皆瓌t
                return this.each(function () { });
            }
})(jQuery);

這里就不作講解了，注釋都寫明了。

示例DEMO如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www./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>