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

昵稱10504424 2014-08-07

展開全文

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

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

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

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

                //不為空則合并參數(shù)
                if (options)
                    $.extend(settings, options);

                //為每個(gè)p元素綁定點(diǎn)擊事件
                $("> p", this).each(function () {
                    $(this).bind("click", function () {
                        $(this).next("ul").slideToggle(settings.speed);
                    });
                });

                //默認(rèn)第一個(gè)展開,，其它折疊
                $("> 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>

效果圖片：

本站是提供個(gè)人知識(shí)管理的網(wǎng)絡(luò)存儲(chǔ)空間,，所有內(nèi)容均由用戶發(fā)布，不代表本站觀點(diǎn),。請注意甄別內(nèi)容中的聯(lián)系方式,、誘導(dǎo)購買等信息，謹(jǐn)防詐騙,。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請點(diǎn)擊一鍵舉報(bào),。

轉(zhuǎn)藏 分享

QQ空間 QQ好友新浪微博微信

獻(xiàn)花（0） +1

來自：昵稱10504424 > 《工作》

舉報(bào)/認(rèn)領(lǐng)