Heim > Web-Frontend > js-Tutorial > jquery Accordion Special Effects Plug-in_jquery

jquery Accordion Special Effects Plug-in_jquery

WBOY
Freigeben: 2016-05-16 16:15:46
Original
1041 Leute haben es durchsucht

Der Akkordeoneffekt ist ein im Projekt häufig verwendeter Effekt. Gegen Ende des Jahres habe ich versucht, selbst einen zu schreiben

CSS-Stil

Code kopieren Der Code lautet wie folgt:
/* CSS-Dokument */
Körper {
Rand: 0 automatisch;
Polsterung: 0 automatisch;
Schriftgröße: 9pt;
Schriftfamilie: Microsoft Yahei, Arial, Helvetica, Verdana, serifenlos;
}
.Akkordeon {
​ padding-left: 0px;
}
.accordion li {
Rand oben: 1 Pixel durchgehend #000;
Listenstiltyp: keiner;
}
.titlemenu {
Breite: 100 %;
Höhe: 30px;
Hintergrundfarbe: #F2F2F2;
Polsterung: 5px 0px;
Textausrichtung: links;
Cursor: Zeiger;
}
.titlemenu img {
Position: relativ;
Links: 20px;
oben: 5px;
}
.titlemenu span {
Anzeige: inline-block;
Position: relativ;
Links: 40px;
}
.submenu {
Textausrichtung: links;
Breite: 100 %;
​ padding-left: 0px;
}
.submenu li {
Listenstiltyp: keiner;
Breite: 100 %;
}
.submenu li img {
Position: relativ;
Links: 20px;
oben: 5px;
}
.submenu li a {
Position: relativ;
Links: 40px;
oben: 5px;
Textdekoration: keine;
}
.submenu li span {
Anzeige: inline-block;
Höhe: 30px;
Polsterung: 5px 0px;
}
.hover {
Hintergrundfarbe: #4A5B79;
}

Benutzerdefiniertes js

Code kopieren Der Code lautet wie folgt:

(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(element.submenu!=null)
                        {
                            li ='';
                        }
                        li ='
  • ';
                    });
                    obj.append(li);
                }
            }
        }
        $.fn.accordion = Funktion (Optionen) {
            var pia = neues Klavier();
            pia.init($(this));
            gib this.each(function () {
    zurück             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");
                    });
                });
            });
        }
        Funktion onClick() {
            $(this).siblings('li').find("ul").each(hide);
            $(this).find("ul").slideDown('normal');
            return false;
        }
        Funktion hide() {
            $(this).slideUp('normal');
        }
        Funktion reset() {
            $(this).find("ul").hide();
        }
    })(jQuery);

    html调用方式

    复制代码 代码如下:





    Document sans titre












    Effet d'affichage

    Ce qui précède représente l'intégralité du contenu de cet article, j'espère que vous l'aimerez tous

    Verwandte Etiketten:
    Quelle:php.cn
    Erklärung dieser Website
    Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
    Beliebte Tutorials
    Mehr>
    Neueste Downloads
    Mehr>
    Web-Effekte
    Quellcode der Website
    Website-Materialien
    Frontend-Vorlage