JavaScript树形菜单组件

树形菜单的交互感，嗯，确实挺重要的。JavaScript的树形菜单，结构清晰，响应也快，写起来还挺顺手的。用对象或者数组，简单下菜单层级就行，挺直观的。

树形菜单的数据结构，一般就是一层一层嵌套的对象或者数组。比如你可以写个menuData对象，直接用children字段搞定子菜单，自然。

展示菜单嘛，搭个

和
• 结构就好了。样式用点position: relative、padding-left，基本上菜单就有层次感了。

  动态生成菜单，可以用个递归函数。像这样：

  function renderTree(data, parent) {
    var ul = document.createElement('ul');
    for (var i = 0; i < data xss=removed xss=removed>

  交互上，加个点击事件就挺方便的。用classList.toggle('expanded')切换状态，子菜单展开折叠，体验还不错。

  像这样加个监听器：

  document.addEventListener('DOMContentLoaded', function() {
    var treeNodes = document.querySelectorAll('#treeMenu .hasChildren');
    treeNodes.forEach(function(node) {
      node.addEventListener('click', function(e) {
        e.stopPropagation();
        this.classList.toggle('expanded');
        var subMenu = this.querySelector('ul');
        if (subMenu) {
          subMenu.style.display = this.classList.contains('expanded') ? 'block' : 'none';
        }
      });
    });
  });

  嗯，整个树形菜单这样搭下来，结构清楚，交互也跟手。如果你想做得更酷，可以试试加点小动画，或者直接用Vue、React去做，省事多了。