手写jquery生成无限极的菜单

java对象:

   @Data
   @AllArgsConstructor
   @NoArgsConstructor
   class Menu{
        private String name;
        private String url;
        private List<Menu> child;
        private String backgroundImage;
   }

后端传入前端的json模拟数据:

data=[
  {
    "name": "菜单0",
    "url": "https://img2.baidu.com/it/u=170788176,908879950&fm=253&fmt=auto&app=138&f=JPEG?w=281&h=499",
    "child": [],
    "backgroundImage": "https://img2.baidu.com/it/u=170788176,908879950&fm=253&fmt=auto&app=138&f=JPEG?w=281&h=499"
  },
  {
    "name": "菜单1",
    "url": "https://img0.baidu.com/it/u=1780747315,948203002&fm=253&fmt=auto&app=138&f=JPEG?w=435&h=500",
    "child": [
      {
        "name": "菜单0",
        "url": "https://img2.baidu.com/it/u=170788176,908879950&fm=253&fmt=auto&app=138&f=JPEG?w=281&h=499",
        "child": [],
        "backgroundImage": "https://img2.baidu.com/it/u=170788176,908879950&fm=253&fmt=auto&app=138&f=JPEG?w=281&h=499"
      }
    ],
    "backgroundImage": "https://img0.baidu.com/it/u=1780747315,948203002&fm=253&fmt=auto&app=138&f=JPEG?w=435&h=500"
  },
  {
    "name": "菜单2",
    "url": "https://img0.baidu.com/it/u=2048261222,989660233&fm=253&fmt=auto?w=800&h=1411",
    "child": [
      {
        "name": "菜单0",
        "url": "https://img2.baidu.com/it/u=170788176,908879950&fm=253&fmt=auto&app=138&f=JPEG?w=281&h=499",
        "child": [],
        "backgroundImage": "https://img2.baidu.com/it/u=170788176,908879950&fm=253&fmt=auto&app=138&f=JPEG?w=281&h=499"
      },
      {
        "name": "菜单1",
        "url": "https://img0.baidu.com/it/u=1780747315,948203002&fm=253&fmt=auto&app=138&f=JPEG?w=435&h=500",
        "child": [
          {
            "name": "菜单0",
            "url": "https://img2.baidu.com/it/u=170788176,908879950&fm=253&fmt=auto&app=138&f=JPEG?w=281&h=499",
            "child": [],
            "backgroundImage": "https://img2.baidu.com/it/u=170788176,908879950&fm=253&fmt=auto&app=138&f=JPEG?w=281&h=499"
          }
        ],
        "backgroundImage": "https://img0.baidu.com/it/u=1780747315,948203002&fm=253&fmt=auto&app=138&f=JPEG?w=435&h=500"
      }
    ],
    "backgroundImage": "https://img0.baidu.com/it/u=2048261222,989660233&fm=253&fmt=auto?w=800&h=1411"
  }
]

html:

<style type="text/css">
  li{
    margin-left: 10%;
    list-style-type: none;
  }
</style>
<div class="parent">
  <ul class="parent_ul" style="background-color: whitesmoke; width: 20%"></ul>
</div>

js(需要引入jquery):

  $(function (){
    init();
    closeAndOpen();
  });
  function closeAndOpen(){
    $("body").on("mouseup","li",function (e) {
      var children = $(this).find(".menu-ul");
      children.toggle(500);
      e.stopPropagation();
    });
  }
  function init(){
    $(".parent>ul>li>ul").remove();
   /* $.ajax({
      url: '/test/array',
      type: 'GET',
      dataType: 'json',
    }).done(function (data) {
      if (data.rs) {
        var res = data.data;
        var h1 = "<li>菜单";
        h1 =ul(res,h1);
        h1+="</li>";
        $(".parent>ul").append(h1);
        $(".parent>ul>li>ul").hide();
      }
    }).fail(function () {
    });*/
    
    
    // data为后端传入前端的数据（上面注明了）
      var res = data;
      var h1 = "<li>菜单";
      h1 =ul(res,h1);
      h1+="</li>";
      $(".parent>ul").append(h1);
     // $(".parent>ul>li>ul").hide();
    }

  /**
   * 递归菜单
   * @param arry
   * @param h1
   * @returns {*}
   */
  function ul(arry){
    if (arry===null){
      return "";
    }
    if (arry.length===0){
      return "";
    }
    var h1="<ul class='menu-ul'>";
    arry.forEach(item=>{
      h1+="<li>"+(item.child.length===0?"<a href='"+item.url+"'>":"")+"<span class='menu-span'" +
              "style='width: 50%; background-image: url("+item.backgroundImage+"')\">"+item.name+"</span>";
          var child = item.child;
          h1+=ul(child);
      h1+=(item.child.length===0?"</a>":"")+"</li>";
    })
    h1+="</ul>";
    return h1;
  }

 这里可能需要注意的是，执行委托函数on时，出冒泡执行倒序，如果不使用e.stopPropagation();终止，可能会出现连带父类的<li>一起执行。

还有一个问题，arry遍历是为什么用forEach不用for i,因为i在递归时出现length无效的一些异常提示，意思是i在内置循环中和外循环公用了。

打赏

创作不易，打赏鼓励（zfb）