jquery手風(fēng)琴特效插件

更新時(shí)間：2015年02月04日 14:20:42 投稿：hebedich

這篇文章主要介紹了jquery手風(fēng)琴特效插件,效果非常棒，需要的朋友可以參考下

手風(fēng)琴效果是項(xiàng)目中使用頻率較高的一種效果，原來(lái)項(xiàng)目一直都在用easyui的，臨近年末，試著自己寫了一個(gè)

css樣式

/* CSS Document */

body {

    margin: 0 auto;

    padding: 0 auto;

    font-size: 9pt;

    font-family: 微軟雅黑, 宋體, Arial, Helvetica, Verdana, sans-serif;

}

.accordion {

    padding-left: 0px;

}

.accordion li {

    border-top: 1px solid #000;

    list-style-type: none;

}

.titlemenu {

    width: 100%;

    height: 30px;

    background-color: #F2F2F2;

    padding: 5px 0px;

    text-align: left;

    cursor: pointer;

}

.titlemenu img {

    position: relative;

    left: 20px;

    top: 5px;

}

.titlemenu span {

    display: inline-block;

    position: relative;

    left: 40px;

}

.submenu {

    text-align: left;

    width: 100%;

    padding-left: 0px;

}

.submenu li {

    list-style-type: none;

    width: 100%;

}

.submenu li img {

    position: relative;

    left: 20px;

    top: 5px;

}

.submenu li a {

    position: relative;

    left: 40px;

    top: 5px;

    text-decoration: none;

}

.submenu li span {

    display: inline-block;

    height: 30px;

    padding: 5px 0px;

}

.hover {

    background-color: #4A5B79;

}

自定義js

復(fù)制代碼代碼如下:

(function ($) {

    piano = function () {

        _menu ='[{"title":"一級(jí)目錄","img":"images/cog.png","submenu":[{"title":"二級(jí)目錄","img":"images/monitor_window_3d.png"},{"title":"二級(jí)目錄","img":"images/monitor_window_3d.png"},{"title":"二級(jí)目錄","img":"images/monitor_window_3d.png"}]},{"title":"一級(jí)目錄","img":"images/cog.png","submenu":[{"title":"二級(jí)目錄","img":"images/monitor_window_3d.png"},{"title":"二級(jí)目錄","img":"images/monitor_window_3d.png"},{"id":"4","title":"二級(jí)目錄","img":"images/monitor_window_3d.png"}]}]';

        return ep = {

            init: function (obj) {

                _menu = eval('(' + _menu + ')');

                 var li ="";

                $.each(_menu, function (index, element) {

                    li += '<li><div class="titlemenu"><img src=' + element.img + ' width="16" height="16"  alt=""/><span>' + element.title + '</span></div>';

                    if(element.submenu!=null)

                    {

                        li+='<ul class="submenu">';

                        $.each(element.submenu, function (ind, ele) {

                            li += '<li><img src=' + ele.img + ' width="16" height="16"  alt=""/><span><a href="#">' + ele.title + '</a></span></li>';

                        });

                        li+='</ul>';

                    }

                    li+='</li>';

                });

                obj.append(li);

            }

        }

    }

    $.fn.accordion = function (options) {

        var pia = new piano();

        pia.init($(this));

        return this.each(function () {

            var accs = $(this).children('li');

             accs.each(reset);

            accs.click(onClick);

            var menu_li = $(".submenu").children("li");

            menu_li.each(function (index, element) {

                $(this).mousemove(function (e) {

                    $(this).siblings().removeClass("hover");

                    $(this).find("a").css("color", "#fff");

                    $(this).siblings().find("a").css("color", "#000");

                    $(this).addClass("hover");

                });

            });

        });

    }

    function onClick() {

        $(this).siblings('li').find("ul").each(hide);

        $(this).find("ul").slideDown('normal');

        return false;

    }

    function hide() {

        $(this).slideUp('normal');

    }

    function reset() {

        $(this).find("ul").hide();

    }

})(jQuery);

html調(diào)用方式

復(fù)制代碼代碼如下:

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>無(wú)標(biāo)題文檔</title>

<script src="jquery-1.8.0.min.js"></script>

<link rel="stylesheet" type="text/css" href="style.css">

<script src="accordion.js"></script>

<script type="text/javascript">            

    $(function(){

        $("#accordion").accordion();

    });

</script>

</head>

<body>

<ul id="accordion"  class="accordion" style="width:200px;height:500px;">

</ul>

</body>

</html>