mui 側欄菜單實現多級樹數據列表，返回上一級樹

想在移動端使用樹結構選擇項目，可是在移動端顯示體驗太差怎麼辦？使用棧結構存儲樹歷史，使用相似側欄菜單的方式實現：

var currtTreeArr = []; //當前樹列表數組
var treeData = []; //根節點數據
var treeHistoryArr = []; //歷史打開的樹，用於回退，進入到其餘節點
$(".mui-table-view").on("click", ".mui-navigate-right", function () { //列表冒泡監聽點擊
  var idx = $(this).attr("index");
  if (currtTreeArr[idx].children.length) {
    //把點擊項的子樹顯示出來，並添加當前點擊的子樹到歷史
    currtTreeArr = currtTreeArr[idx].children;
    treeHistoryArr.push(currtTreeArr);
    renderTree(currtTreeArr);
  } else {
    renderLeafNode(currtTreeArr[idx].id); //葉子節點
  }
});

//渲染樹結構列表
function renderTree(data) {
  if (treeHistoryArr.length > 1) {
    $("#goback").show(); //顯示返回上一級按鈕
  } else {
    $("#goback").hide();
  }
  var dom = "";
  data.forEach(function (item, idx) {
    dom +=
      ' <li class="mui-table-view-cell"><a class="mui-navigate-right" index=' +
      idx +
      ">" +
      item.name +
      "</a></li>";
  });
  $(".mui-table-view").empty().html(dom);
}

//顯示樹
function showTreeList() {
  treeHistoryArr = [];
  currtTreeArr = [{ //獲取到的樹數據
    name: '根節點',
    id: 1,
    children: [{
      name: '一級1',
      id: 11,
      children: [...]
    }, {
      ...
    }]
  }, ...];
  renderTree(currtTreeArr);
  treeHistoryArr.push(currtTreeArr);
  mui(".mui-off-canvas-wrap").offCanvas("show");
}

function renderLeafNode(id) {
  ...葉子節點的渲染
}