jquery akordion kesan khas plug-in_jquery

Kesan akordion adalah kesan yang kerap digunakan dalam projek Ternyata projek itu telah menggunakan easyui Memandangkan penghujung tahun, saya cuba menulis sendiri

gaya css

Salin kod Kod adalah seperti berikut:

/* Dokumen CSS */
badan {
margin: 0 auto;
Padding: 0 auto;
saiz fon: 9pt;
Keluarga fon: Microsoft Yahei, Arial, Helvetica, Verdana, sans-serif;
}
.akordion {
​ padding-left: 0px;
}
.akordion li {
Atas sempadan: 1px pepejal #000;
Jenis gaya senarai: tiada;
}
.titlemenu {
lebar: 100%;
Tinggi: 30px;
Warna latar belakang: #F2F2F2;
Padding: 5px 0px;
Jajaran teks: kiri;
Kursor: penunjuk;
}
.titlemenu img {
Jawatan: relatif;
Kiri: 20px;
atas: 5px;
}
.titlemenu span {
Paparan: blok sebaris;
Jawatan: relatif;
Kiri: 40px;
}
.submenu {
Jajaran teks: kiri;
lebar: 100%;
​ padding-left: 0px;
}
.submenu li {
Jenis gaya senarai: tiada;
lebar: 100%;
}
.submenu li img {
Jawatan: relatif;
Kiri: 20px;
atas: 5px;
}
.submenu li a {
Jawatan: relatif;
Kiri: 40px;
atas: 5px;
hiasan teks: tiada;
}
.submenu li span {
Paparan: blok sebaris;
Tinggi: 30px;
Padding: 5px 0px;
}
.tuding {
Warna latar belakang: #4A5B79;
}

JS tersuai

Salin kod Kod adalah seperti berikut:

(function ($) {
    piano = function () {
        _menu ='[{"title":"一级目录","img":"images/cog.png","submenu":[{"title":"二级目录","img":"images/monitor_window_3d.png"},{"title":"二级目录","img":"images/monitor_window_3d.png"},{"title":"二级目录","img":"images/monitor_window_3d.png"}]},{"title":"一级目录","img":"images/cog.png","submenu":[{"title":"二级目录","img":"images/monitor_window_3d.png"},{"title":"二级目录","img":"images/monitor_window_3d.png"},{"id":"4","title":"二级目录","img":"images/monitor_window_3d.png"}]}]';
        return ep = {
            init: function (obj) {
                _menu = eval('(' + _menu + ')');
                 var li ="";
                $.each(_menu, function (index, element) {
                    li += '

' + element.title + '

';
                    if(elemen.submenu!=null)
                    {
                        li ='

';
                        $.each(elemen.submenu, fungsi (ind, ele) {
                            li = '
• ' ele.title '
';
                        });
                        li ='

';
                    }
                    li ='

';
                });
                obj.append(li);
            }
        }
    }
    $.fn.accordion = fungsi (pilihan) {
        var pia = piano baharu();
        pia.init($(this));
        kembalikan ini.setiap(fungsi () {
            var accs = $(this).children('li');
             accs.each(set semula);
            accs.click(onClick);
            var menu_li = $(".submenu").kanak-kanak("li");
            menu_li.each(fungsi (indeks, elemen) {
                $(this).mousemove(fungsi (e) {
                    $(this).siblings().removeClass("hover");
                    $(this).find("a").css("color", "#fff");
                    $(this).siblings().find("a").css("color", "#000");
                    $(this).addClass("legar");
                });
            });
        });
    }
    fungsi onClick() {
        $(ini).adik beradik('li').cari("ul").setiap(sembunyi);
        $(this).find("ul").slideDown('normal');
        pulangkan palsu;
    }
    function hide() {
        $(this).slideUp('normal');
    }
    set semula fungsi() {
        $(this).cari("ul").sembunyi();
    }
})(jQuery);

html调用方式

复制代码 代码如下:

Anzeigeeffekt

Das Obige ist der gesamte Inhalt dieses Artikels, ich hoffe, er gefällt euch allen