Rumah > hujung hadapan web > tutorial js > jquery akordion kesan khas plug-in_jquery

jquery akordion kesan khas plug-in_jquery

WBOY
Lepaskan: 2016-05-16 16:15:46
asal
1040 orang telah melayarinya

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 ='';
                        }
                        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调用方式

    复制代码 代码如下:





    Unbenanntes Dokument












    Anzeigeeffekt

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

    Label berkaitan:
    sumber:php.cn
    Kenyataan Laman Web ini
    Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
    Tutorial Popular
    Lagi>
    Muat turun terkini
    Lagi>
    kesan web
    Kod sumber laman web
    Bahan laman web
    Templat hujung hadapan