当前位置 : 主页 > 网页制作 > html >

列表导航栏记录一下

来源:互联网 收集:自由互联 发布时间:2021-06-12
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/widge

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))

网友评论