zoukankan      html  css  js  c++  java
  • 列表导航栏记录一下

    var data = [{

          url: "#",

          icon: "fa fa-dashboard",

          name: "Dashboard",

          children: [{

            url: "index.html",

            icon: "fa fa-circle-o",

            name: "Dashboard v1"

          }, {

            url: "index2.html",

            icon: "fa fa-circle-o",

            name: "Dashboard v2"

          }]

        }, {

          url: "pages/widgets.html",

          icon: "fa fa-dashboard",

          name: "wat",

          children: []

        }]

     

     

        function getHTml(data) {

          var html = "";

          for (var i = 0; i < data.length; i++) {

            var item = data[i];

            if (item.children.length) {

              html += `<li class="treeview">

            <a href=" ">

              <i class="${item.icom}"></i> 

              <span>${item.name}</span>

              <span class="pull-right-container">

                <i class="fa fa-angle-left pull-right"></i>

              </span>

            </a >

            <ul class="treeview-menu">`

              for (var j = 0; j < item.children.length; j++) {

                var sub_item = item.children[j]

                html += `<li><a href="${sub_item.url}">

                <i class="${sub_item.icon}"></i>${sub_item.name}</a ></li>`

              }

              html += `</ul>

          </li>`

            } else {

              html += `<li>

            <a href="${item.url}">

              <i class="${item.icom}"></i> <span>${item.name}</span>

            </a >

          </li>`

            }

          }

          return html;

        }

        $('.sidebar-menu').html(getHTml(data))

  • 相关阅读:
    数据库中char、varchar、varchar2、nvarchar之间的关系
    Oracle中scott用户下基本表练习SQL语句
    判断一个数是否是素数
    阿里P7前端需要哪些技能
    react Native 踩坑记录
    流程节点(2018.7.31)
    在centos7下手工安装和配置Nginx
    微信公众号开发
    nodejs 实战
    数据库权限表的设计
  • 原文地址:https://www.cnblogs.com/ayanboke/p/11401043.html
Copyright © 2011-2022 走看看