Maison  >  Article  >  interface Web  >  Code d'implémentation simple pour le menu déroulant infini jquery_jquery

Code d'implémentation simple pour le menu déroulant infini jquery_jquery

WBOY
WBOYoriginal
2016-05-16 16:59:09932parcourir

Cet exemple utilise les données json pour assembler ul et li afin de réaliser le rendu
 :




1 Préparer les données json :

Copier le code Le code est le suivant :

var menuData = [
            {id:0,pid:-1,name:"订购产品",url:"",children:[
                 {id:1,pid:0, nom : "电脑配件",url :"http://www.jb51.net",enfants :[
                    {id:20,pid:1,name:"cpu",url:"http://www .jb51.net",enfants :[
                         {id:30,pid:20,name:"Intel",url:"http://www.jb51.net",enfants:[
                             {id : 3000,pid:30,name:"Intel 01",url:""},
                           {id:3001,pid:30,name:"Intel 02",url:""},
                           { identifiant : 3002,pid:30,name:"Intel 03",url:""},
                           {id:3003,pid:30,name:"Intel 04",url:""},
                           { identifiant : 3004,pid:30,name:"Intel 05",url:""},
                           {id:3005,pid:30,name:"Intel 06",url:""},
                           { identifiant : 3006,pid:30,name:"Intel 07",url:""},
                           {id:3007,pid:30,name:"Intel 08",url:""},
                           { identifiant : 3008,pid:30,name:"Intel 09",url:""}
                        ]},
                        {id:31,pid:20,name:"AMD",url:"http://www " DMLA "AMD D "AMD D "AMD D 08",url:""},
                            {id:3108,pid:31,name:"AMD 09",url:""}
                        ]}
                                     )                                                                                        .net"},
{id:24,pid:1,name: "carte graphique",url:"http://www.jb51.net"},
{id:25,pid:1, nom:"moniteur",url:"http://www.jb51.net "},
                                                                                                                                                                                              .net"},
{id:27,pid:1,name:"Alimentation principale du châssis",url:"http://www.jb51. .net"},
{id:28,pid: 1,name:"Clavier et souris (filaires)",url:"http://www.jb51.net"},
                                                                                                                                :"http://www.jb51.net "}
                                                                                                                                                                                      ", enfants : [
{id : 102, pid : 101, nom : " caméra », url : " http://www.jb51.net "},
{identifiant : 103 , pid: 101, nom:"Camera",url:"http://www.jb51.net"},
                                                                                                                                                                                                   net"},
{id:112,pid:101,name:"Caméra ",url:"http://www.jb51.net"},
{id:113,pid:101,name :"Caméra",url:"http://www.jb51.net"},
                                                                                                                                                     "},
{id:115,pid:101,name:"Camera",url:"http://www.jb51.net"},
"Caméra",url:"http ://www.jb51.net"},
                                                         {id:117, pid:101, nom : "Caméra", url : "http://www.jb51.net }
                                                                                                                                           ,pid:201 ,name:"Camera",url:"http://www.jb51.net"}
                                                                                                                    ;​​​​:401,nom : "Imprimante",url :"http://www.jb51.net "}. ",url:"http://www.jb51.net"},
                                                                                                                                      
                      {id:406, pid:401, nom : "Caméra", url : "http://www.jb51. net"},
                                                                                          ,url:"http://www.jb51.net"},
                                                                                                                                                                                                                                                  >                                                                                                                                                                                                                        "            ;                                                                                                                                                                                                           :"Dernières nouvelles",url:""},
🎜>
Code 2.html :




Copier le code


Le code est le suivant :


< div id="menu">


    3. js) : Je viens d'apprendre à écrire un plug-in jquery, et c'est un peu compliqué. Faisons avec
    Copiez le code. Le code est le suivant :

    (function($){
        $.fn.extend({
            menu:function(options){
                var defaults = {
                     data:[],
    ulId:"baseMenu"
                };
                var options = $.extend(defaults, options);
                // 开始拼接ul,li
                $.each(options.data,function (je, v){
                    var li = $("
  • ");
                    var _a = $("" options.data[i].name "");
                     _a.attr("href",options.data[i ].url)
                        .appendTo(li);

                   _each(options.data[i],li);
                     li.appendTo($("#" options.ulId));
                });
                // 给li添加事件
                $(this).find("li").hover(function(){
                   var id = $(this).attr(" identifiant ");
                    $(this).find("ul[name='" id "']").show();
                },function(){
                    var id = $(this) .attr("id");
                    $(this).find("ul[name='" id "']").hide();
                });
             }
        } );
    })(jQuery);

    因为支持无限级,所以肯定会用到递归方法 :
    复制代码 代码如下 :

    function _each(data,li){
        if(data==undefined||data.children==undefined){
            return false;
        }
        var ul = $("
      ");

          $.each(data.children,function(i,v){
              var _li = $("
    • ");
              var _a = $("" data.children[i].name "");
              _a.attr("href",data.children[i].url)
                  .attr("target","_blank")
                  .appendTo(_li);

              if( data.children[i].children!=undefined){
                  _each(data.children[i],_li);
              }
              _li.appendTo(ul);
          });
          ul.appendTo(li);
      }

      4.调用插件 :
      复制代码 代码如下 :

      $(function() {
          $("#menu").menu({data:menuData,ulId:"baseMenu"});
      } );

      最后,css样式:
      复制代码 代码如下:

      ul,li{list-style:none;padding:0px;margin:0px;}
      #menu *{line-height:30px;}
      #menu a{text-decoration : aucun;}
      #menu ul{text-align:left;}
      #menu>ul>li{text-align:center;width:80px;float:left;}
      #menu>ul> li>a{color:#000;}
      #menu>ul>li:hover{background:#F0F0F0;>
      #menu>ul>li ul{display:none;width:150px;position:absolute ;background:#c1cd94;box-shadow:2px 2px 2px #000;-webkit-box-shadow:2px 2px 2px #000;
        -moz-box-shadow:2px 2px 2px #123;}
      # menu>ul>li>ul li{padding-left:5px; position:relative;}
      #menu>ul>li>ul li>a{color:#000;>
      #menu>ul>li>ul li:hover{background:#d3dbb3;}
      #menu>ul>li>ul>li ul{gauche:150px; haut : 0px ;🎜>
      Déclaration:
      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
      Article précédent:Comparaison des méthodes de jQuery pour éviter les conflits entre le symbole $ et les autres bibliothèques JS_jqueryArticle suivant:Comparaison des méthodes de jQuery pour éviter les conflits entre le symbole $ et les autres bibliothèques JS_jquery

      Articles Liés

      Voir plus