Maison > interface Web > js tutoriel > le corps du texte

jquery accordéon effets spéciaux plug-in_jquery

WBOY
Libérer: 2016-05-16 16:15:46
original
974 Les gens l'ont consulté

L'effet accordéon est un effet fréquemment utilisé dans le projet. Il s'avère que le projet utilisait easyui Vers la fin de l'année, j'ai essayé d'en écrire un moi-même

.

style CSS

Copier le code Le code est le suivant :

/* Document CSS */
corps {
marge : 0 auto ;
Remplissage : 0 auto ;
taille de police : 9 pt ;
Famille de polices : Microsoft Yahei, Arial, Helvetica, Verdana, sans-serif ;
>
.accordéon {
​ padding-left : 0px;
>
.accordéon li {
Bordure supérieure : 1px solide #000;
Type de style de liste : aucun ;
>
.titremenu {
largeur : 100 % ;
Hauteur : 30 px ;
Couleur de fond : #F2F2F2;
Rembourrage : 5px 0px ;
Alignement du texte : gauche ;
Curseur : pointeur ;
>
.titlemenu img {
Position : relative ;
Gauche : 20 px ;
haut : 5px ;
>
.titlemenu span {
Affichage : bloc en ligne ;
Position : relative ;
Gauche : 40 px ;
>
.sous-menu {
Alignement du texte : gauche ;
largeur : 100 % ;
​ padding-left : 0px;
>
.submenu li {
Type de style de liste : aucun ;
largeur : 100 % ;
>
.submenu li img {
Position : relative ;
Gauche : 20 px ;
haut : 5px ;
>
.submenu li a {
Position : relative ;
Gauche : 40 px ;
haut : 5px ;
décoration de texte : aucune ;
>
.submenu li span {
Affichage : bloc en ligne ;
Hauteur : 30 px ;
Rembourrage : 5px 0px ;
>
.hover {
Couleur de fond : #4A5B79;
>

Js personnalisés

Copier le code Le code est le suivant :

(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 + '
    ';
                        si(element.submenu!=null)
                        {
                            li ='';
                        >
                        li ='
  • ';
                    });
                    obj.append(li);
                >
            >
        >
        $.fn.accordion = fonction (options) {
            var pia = nouveau piano();
            pia.init ($(this));
            renvoyer this.each(function () {
                var accs = $(this).children('li');
                 accs.each(reset);
                accs.click(onClick);
                var menu_li = $(".submenu").children("li");
                menu_li.each(fonction (index, élément) {
                    $(this).mousemove(function (e) {
                        $(this).siblings().removeClass("hover");
                        $(this).find("a").css("color", "#fff");
                        $(this).siblings().find("a").css("color", "#000");
                        $(this).addClass("hover");
                    });
                });
            });
        >
        fonction onClick() {
            $(this).siblings('li').find("ul").each(hide);
            $(this).find("ul").slideDown('normal');
            retourner faux ;
        >
        fonction cacher() {
            $(this).slideUp('normal');
        >
        fonction réinitialiser() {
            $(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

    Étiquettes associées:
    source:php.cn
    Déclaration de ce site Web
    Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
    Tutoriels populaires
    Plus>
    Derniers téléchargements
    Plus>
    effets Web
    Code source du site Web
    Matériel du site Web
    Modèle frontal