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) {
  ...叶子节点的渲染
}