• 内容换行展示


    js:

    function createDiv(datas){
    var eachTwoMenu = '';
    eachTwoMenu += '<div class="col-md-3" style="min-180px;">';
    eachTwoMenu += '<ul class="mega-menu-submenu">';
    for (var k = 0; k <datas.length ; k++) {
    eachTwoMenu += '<li><a href="javascript:;">'+datas[k].twoTitle+'</a></li>';
    };
    eachTwoMenu += '</ul>';
    eachTwoMenu += '</div>';
    return eachTwoMenu;
    }

    function levelMenuNav(res){
    for (var i = 0; i < res.twoMenuJson.length; i++) {//一级标题循环
    var eachTwoMenu = ""
    eachTwoMenu +='<li class="menu-dropdown mega-menu-dropdown ">';
    eachTwoMenu += '<a href="javascript:;"> 定义平台</a>';
    eachTwoMenu += '<ul class="dropdown-menu" style="">';
    eachTwoMenu += '<li>';
    eachTwoMenu += '<div class="mega-menu-content">';
    eachTwoMenu += '<div class="row">';
    var datas = [];
    for(var j = 0 ; j < res.twoMenuJson[i].twoMenu.length; j ++){
    datas.push(res.twoMenuJson[i].twoMenu[j]);
    if(datas.length == 10){
    eachTwoMenu += createDiv(datas);
    datas = [];
    }
    }
    if(datas.length > 0){
    eachTwoMenu += createDiv(datas);
    datas = [];
    }
    eachTwoMenu += '</div>';
    eachTwoMenu += '</div>';
    eachTwoMenu += '</li>';
    eachTwoMenu += '</ul>';
    eachTwoMenu +='</li>';
    // 插入节点
    $(eachTwoMenu).appendTo($("#levelMenuNavId"));
    };

    }

    json:

    levelMenuNav({
    "twoMenuJson": [
    {
    "oneIcon":"icon-home",
    "oneTitle":"一级标题",
    "oneArrows":"dropdown-submenu",
    "twoMenu":[
    {"twoTitle":"二级标题01"},
    {"twoTitle":"二级标题02"},
    {"twoTitle":"二级标题03"},
    {"twoTitle":"二级标题04"},
    {"twoTitle":"二级标题05"},
    {"twoTitle":"二级标题06"},
    {"twoTitle":"二级标题07"},
    {"twoTitle":"二级标题08"}
    ]
    },

    ]
    })

    效果:

  • 相关阅读:
    获取html页面传递过来的参数
    jqueryWeiui+pagehelper滚动加载(实现分页)
    【JS】js随笔
    【Java】Java基础
    【FrameWork】Hibernate
    【FrameWork】Struts2
    去掉inline-block间的间隙
    javascript单例模式
    关于call/apply与bind的一点误解
    git笔记-常用命令
  • 原文地址:https://www.cnblogs.com/onceweb/p/12982247.html
Copyright © 2020-2023  润新知