菜单组件
实现收缩状态的 tooltip
竖向菜单的展开和收缩
竖向菜单的打开/关闭动画
重难点
- 子菜单的数量是不确定的，因此要实现
height:0 <--> height:auto的过渡动画 - 展开所有要分两步：
- 找到所有子菜单树的所有未展开的第一个根节点，然后将其子孙节点全部展开(此时无需过渡动画，界面也看不到效果)
- 找到所有子菜单树的所有未展开的第一个根节点，然后展开该节点（此时需要过渡动画，界面可以看到效果）
- 关闭所有要分两步:
- 找到所有子菜单树的所有已展开的第一个根节点，然后关闭（此时需要使用过渡动画，界面可以看到效果）
- 找到所有子菜单树的所有已展开的第一个根节点，在第一个根节点关闭之后，找到其所有子孙节点，将子孙节点关闭（此时无需使用过渡动画，界面看不到效果）
- 根据 id 打开指定节点
- 根据 id 找到菜单节点的节点数据
- 找到其所有先辈节点
- 记录所有收缩状态的先辈节点 id
- 如果存在收缩状态的先辈节点，则将第一个先辈之外的所有先辈节点和需要打开的指定节点展开（此时无需动效），然后再打开第一个先辈节点（此时需要动效）
- 如果不存在收缩状态的先辈节点，则直接将指定节点的子菜单打开（此时需要动效）
参考资料
Jquery 的 slideDown、slideUp、slideToggle 原理
Why does getComputedStyle return 'auto' for pixels values right after element creation?