jquery 根据分辨率初始化按钮区域

initButtons = function(btnlist,btnAreaId){
 try{
     /** 获取按钮区域宽度*/
     var boxWidth = document.querySelector("#btnAreaId").offsetLeft
     if ( btnlist.length > 0 ) {
         /** 遍历按钮列表*/
         for ( var i = 0,len = btnlist.length; i < len; i++ ) {
                 /** 获取已渲染的按钮列表*/
                 var hasBtnList = document.querySelector('#' + btnAreaId).querySelectorAll('.btn')
                 if(hasBtnList.length > 0) {
                     var occupyWidth = hasBtnList[hasBtnList.length - 1].offsetLeft + hasBtnList[hasBtnList.length - 1].offsetWidth
                     if(boxWidth - occupyWidth >150 ) {
                         var temp = ""
                         temp = '<span class="icon-box" ' +
                             'οnclick="' + btnlist[i].func_name + '('+btnlist[i].func_param +')"' +
                             'id="' + btnlist[i].btn_id + '">' +
                             btnlist[i].text + '</span>';
                         $("#"+btnAreaId).append(temp);
                     }else {
                         if(document.querySelectorAll('#' + btnAreaId + " #showMoreBtn").length === 0) {
                             /** 如果地方不足，并且只剩一个按钮，直接去渲染按钮，否则渲染更多*/
                             if(btnlist.length - i === 1) {
                                 var temp = ""
                                 temp = '<span class="btn" ' +
                                     'οnclick="' + btnlist[i].func_name + '('+btnlist[i].func_param +')"' +
                                     // 'id="' + current_tab_btns[i].action_code + '"><i class="iconbtn ' + current_tab_btns[i].icon_name + '"></i>' +
                                     'id="' + btnlist[i].btn_id + '">' +
                                     btnlist[i].text + '</span>';
                                 $("#"+btnAreaId).append(temp);
                             }else {
                                 var temp = ""
                                 temp = '<span class="icon-box hidden" οnclick="showMoreBtn()" id="showMoreBtn">' +
                                     '更多' +
                                     '<ul class="list-group hidden" id="moreBtnContent" style="position: absolute; top: 22px; left: 17px; z-index: 3000;"></ul>' +
                                     '</span>'
                                 $("#"+btnAreaId).append(temp);

                                 var moreItem = '<li class="list-item" ' +
                                     'οnclick="' + btnlist[i].func_name + '('+btnlist[i].func_param +')"' +
                                     'id="' + btnlist[i].btn_id + '">' +
                                     btnlist[i].text + '</li>';
                                 $("#"+btnAreaId + " #moreBtnContent").append(moreItem);
                             }
                         }else {
                             var moreItem = '<li class="list-item" ' +
                                 'οnclick="' + btnlist[i].func_name + '('+btnlist[i].func_param +')"' +
                                 'id="' + btnlist[i].btn_id + '">' +
                                 current_tab_btns[i].text + '</li>';
                             $("#"+btnAreaId + " #moreBtnContent").append(moreItem);
                         }
                     }
                 }else {
                     var temp = ""
                     temp = '<span class="btn" ' +
                         'οnclick="' + btnlist[i].func_name + '('+btnlist[i].func_param +')"' +
                         'id="' + btnlist[i].btn_id + '">' +
                         btnlist[i].text + '</span>';
                     $("#"+btnAreaId).append(temp);
                 }
         }
     } else {
         var btn_html = '';
         $("#"+btnAreaId).html('<div><span class="btn">占位</span></div>');
     }
 }catch(err){
     console.log(err)
 }
}

showMoreBtn = function(){
       $("#moreBtnContent").toggleClass('hidden')
}