bootstrap动态折叠菜单，按钮拉伸，菜单动态获取数据

代码真实有效，
如果给您带来帮助，请不吝点个赞,支持一哈。

html代码：

    
    
    
    
    





        

        点我控制菜单
        主窗口
            
  

js代码：

//初始化菜单的函数封装
var initmenu = function(dropdown,menudata) {

    var dropdown = $(dropdown);
    var i=0;
    function createNode(data) {


        var html ='
';
        i++;

        for(var key in data) {

            if(data[key]["child"]) {
                //
                // 
                html +='
'+data[key]["name"]+''+' ';//data-toggle="collapse"

                html += createNode(data[key]["child"]);

            } else {
                html +='
'+data[key]["name"]+'';

            }
                dropdown.append('
');

        }

        html +='
';

        return html;

    }
    var html = createNode(menudata);
    
    dropdown.append(html);

}
//后台数据
var menudata = {

    //name:"顶级菜单",
    "id4": {
        name: "组织结构管理", link: "#1",icon: "glyphicon glyphicon-cog",
        icon1:"pull-right glyphicon glyphicon-chevron-down",
        child: {

            "id5": {name: "单位管理", link: "https://www.baidu.com/"},

            "id6": {name: "部门管理", link: "link"},
                }

    },

    "id1":{name:"主页",link:"https://www.baidu.com/"},

    "id2":{name:"用户管理",link:"link"},

    "id3":{name:"用户权限管理",link:"link"},
}
 //从后台获取数据函数调用
initmenu("#dropdown",menudata);
 var  hsfoldIcon =true;
 var menuIsShow = true; // 菜单收缩标志
 var menuWidth; // 菜单宽度
 /**
  * 菜单收缩/展开
  * element 菜单所在容器宽度设置,例如'#menuDiv'
  */
 function menuPullback(element) {
     // 控制li>a>span隐藏状态
     // hsSpanElement = hsfoldIcon ? 'ul>li>a>span:not([class*="glyphicon "])' : 'ul.nav>li>a>span:not([class*="glyphicon"])';
     hsSpanElement = hsfoldIcon ? 'ul>li>a>span' : 'ul>li>a>span';
     $(hsSpanElement).each(function() {
         if ($(this).is(':hidden')) {
             $(this).show();
         } else {
             $(this).hide();
         }
     });
     // 判断menuIsShow的状态
     if (menuIsShow) {
         menuWidth = 60;
         $(element).width(menuWidth); // 设置宽度
         // 修改标志位
         menuIsShow = false;
     } else {
         menuWidth = 230;
         $(element).width(menuWidth); // 设置宽度
         menuIsShow = true;
     }
 }