jQuery 树型菜单完整代码

简介: jQuery 树型菜单完整代码

jQuery 树型菜单完整代码:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title>jQuery树形菜单</title>
    <script src="./js/jquery-3.6.0.js"></script>
    <style type="text/css">
      /* 初始化页面 */
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      
      /* 设置背景页面 */
      body {
        width: 100%;
        min-height: 100vh;
        background-color: #029688;
        display: flex;
        justify-content: center;
      }
      
      /* 设置树形菜单宽度 */
      .tree {
        width: 60%;
      }
      
      /* 设置树形菜单标题 */
      .tree h1 {
        width: 100%;
        height: 60px;
        text-align: center;
        line-height: 60px;
        color: #F7F29B;
        font-family: "楷体";
        letter-spacing: 3px;
      }
      
      /* 设置标题下边的水平线 */
      .tree i{
        display: block;
        width: 100%;
        height: 1px;
        background-color: #D7DBDB;
        position: relative;
      }
      
      /* 设置标题水平线中心的菱形 */
      .tree i::before{
        content: "";
        width: 7px;
        height: 7px;
        transform: rotate(45deg);
        background-color: #D7DBDB;
        position: absolute;
        top: -3px;
        left: 50%;
        margin-left: -3.5px;
      }
      
      /* 设置树形菜单列表 */
      .tree-list{
        width: 100%;
        margin-top: 20px;
      }
      
      /* 设置列表缩进效果 */
      .tree-list div{
        width: 100%;
        padding-left: 40px;
        position: relative;
        display: none;
      }
      
      /* 设置列表名称 */
      .tree-list p{
        display: flex;
        justify-content: space-between;
        width: 100%;
        height: 40px;
        line-height: 40px;
        color: #F7FBFB;
      }
      
      /* 设置箭头图片 */
      .tree-list img{
        width: 14px;
        height: 14px;
        margin: 13px;
        transition: all 0.3s;
      }
      
      /* 设置箭头图片旋转效果 */
      .tree-list .active{
        transform: rotate(180deg);
      }
      
      /* 设置鼠标悬浮样式 */
      .tree-list p:hover{
        background-color: rgba(80, 220, 220, 0.2);
      }
      
      /* 设置列表分类水平线 */
      .tree-list>em{
        display: block;
        width: 100%;
        height: 2px;
        background-color: #D7DBDB;
        margin: 5px 0;
      }
    </style>
  </head>
  <body>
    
    <div class="tree">
      <h1>数据分类</h1>
      <i></i>
      <div class="tree-list"></div>
    </div>
    
    <script type="text/javascript">
      
      // 设置变量用于存储拼接的标签字符串
      let content = "";
      
      // 请求本地 json 文件
      $.ajax({
        type:"GET",
        url:"./js/data.json",
        success:function(res){
          console.log(res);
          // 调用数据拼接函数
          render(res);
          // 将字符串输出到页面中
          $(".tree-list").html(content)
        }
      })
      
      // 数据拼接函数 将数据拼接成标签字符串
      function render(arr){
        for(let item of arr){
          if(item.child != undefined && item.child.length > 0){
            content += `<p onclick="cut(event)"><span onclick="skip()">${item.name}</span><img src="img/arrows.png" /></p>
                <div>`;
            render(item.child);
            content += `</div><em></em>`;
          }else{
            content += `<p><span onclick="skip()">${item.name}</span></p><em></em>`;
          }
        }
      }
      
      // 列表显示隐藏事件
      function cut(e){
        e = e || window.event;
        let targets = e.target || e.srcElemet;
        $(targets).next("div").toggle(300);
        $(targets).find("img").toggleClass("active");
      }
      
      // 列表跳转事件
      function skip(){
        location.href = "./index.html";
      }
      
    </script>
    
  </body>
</html>

JSON 假数据文件:

[
  {
    "name":"一级菜单1",
    "child":[
      {
        "name":"二级菜单1-1",
        "child":[]
      },{
        "name":"二级菜单1-2",
        "child":[
          {
            "name":"三级菜单1-2-1",
            "child":[]
          },{
            "name":"三级菜单1-2-2",
            "child":[]
          }
        ]
      },{
        "name":"二级菜单1-3",
        "child":[]
      },{
        "name":"二级菜单1-4",
        "child":[]
      },{
        "name":"二级菜单1-5",
        "child":[
          {
            "name":"三级菜单1-5-1",
            "child":[]
          },{
            "name":"三级菜单1-5-2",
            "child":[]
          }
        ]
      }
    ]
  },{
    "name":"一级菜单2",
    "child":[
      {
        "name":"二级菜单2-1",
        "child":[
          {
            "name":"三级菜单2-1-1",
            "child":[]
          },{
            "name":"三级菜单2-1-2",
            "child":[]
          }
        ]
      },{
        "name":"二级菜单2-2",
        "child":[]
      },{
        "name":"二级菜单2-3",
        "child":[]
      }
    ]
  },{
    "name":"一级菜单3",
    "child":[]
  },{
    "name":"一级菜单4",
    "child":[
      {
        "name":"二级菜单4-1",
        "child":[]
      },{
        "name":"二级菜单4-2",
        "child":[
          {
            "name":"三级菜单4-2-1",
            "child":[]
          },{
            "name":"三级菜单4-2-2",
            "child":[]
          },{
            "name":"三级菜单4-2-3",
            "child":[]
          }
        ]
      },{
        "name":"二级菜单4-3",
        "child":[]
      },{
        "name":"二级菜单4-4",
        "child":[]
      },{
        "name":"二级菜单4-5",
        "child":[]
      }
    ]
  },{
    "name":"一级菜单5",
    "child":[]
  },{
    "name":"一级菜单6",
    "child":[
      {
        "name":"二级菜单6-1",
        "child":[
          {
            "name":"三级菜单6-1-1",
            "child":[]
          },{
            "name":"三级菜单6-1-2",
            "child":[]
          },{
            "name":"三级菜单6-1-3",
            "child":[]
          }
        ]
      },{
        "name":"二级菜单6-2",
        "child":[]
      },{
        "name":"二级菜单6-3",
        "child":[]
      }
    ]
  },{
    "name":"一级菜单7",
    "child":[
      {
        "name":"二级菜单7-1",
        "child":[]
      },{
        "name":"二级菜单7-2",
        "child":[]
      }
    ]
  },{
    "name":"一级菜单8",
    "child":[]
  },{
    "name":"一级菜单9",
    "child":[]
  }
]


目录
打赏
0
0
0
0
13
分享
相关文章
|
9月前
|
jQuery幸运大转盘抽奖活动代码
jQuery幸运大转盘抽奖活动代码
109 7
jQuery幸运大转盘抽奖活动代码
|
4月前
|
jQuery 树型菜单插件(Treeview)
jQuery 树型菜单插件(Treeview)
80 2
jQuery和CSS3滑动展开菜单按钮插件
这是一款jQuery和CSS3滑动展开菜单按钮插件。该滑动展开菜单按钮在用户点击主菜单按钮之后,子菜单以滑动的方式依次展开
70 21
|
6月前
|
鼠标事件(点击换色)分别使用js和jQuery代码实现
鼠标事件(点击换色)分别使用js和jQuery代码实现
54 1
|
3月前
|
基于jQuery实现文字点击验证代码
jQuery文字点击验证代码基于jquery-3.4.1.min.js制作,按顺序,依次点击文字通过验证。
41 5
|
3月前
|
jQuery实现的星级打分带评价及颜色区分代码
jQuery实现的星级打分带评价及颜色区分效果代码是一款支持自定义评论颜色的星级评价打分,其中红色为一星级,差评、绿色位五星级、满分好评,本段代码适应于所有网页使用,有需要的朋友们就来下载使用吧。
45 2
杨校老师课堂之Web前端JS类库_JQuery案例[效果图与代码齐全]
杨校老师课堂之Web前端JS类库_JQuery案例[效果图与代码齐全]
45 0
|
9月前
|
jQuery模态框弹窗提示代码
jQuery模态框弹窗提示代码
57 1
jQuery模态框弹窗提示代码