一．折叠菜单
效果图:
功能思路分析:
功能一:数据渲染
1. 模拟数据，一级数据为数组套对象的形式，二级数据为数组；
2. 先渲染一级数据，然后再嵌套渲染二级数据（map().join(‘’)）;
功能二:子菜单的显示隐藏
1. 定义一个初始下标index = 0;
2. 给每一个一级菜单绑定点击事件，点击一级菜单时要干三件事:
(1) 上一个二级菜单隐藏
(2) 修改为当前点击项的下标
(3) 当前点击项的二级菜单显示
#二．留言板
效果图:
功能思路分析:
功能一:头像高亮
1. 给每一个头像绑定点击事件，通过active类名的切换实现头像高亮显示
2. 记录图片路径，后面发表留言要用。
功能二: 发表留言
1. 点击广播按钮发布留言，但是需要满足二个条件才能发表留言:
(1) 用户名文本框必须有内容( user.value.trim().length > 0 )
(2) 内容框文必须有内容( user.value.trim().length > 0 )
2. 以上条件为真后要做的事情
(1) 调用发表留言的方法
(2) 调用初始化方法（清空文本框等）
(3) 发表成功数量加1
功能三:删除留言
1. 在留言发表成功后调用删除留言的方法( 动态创建的元素必须在创建之后才能找到 );
2. 找到删除按钮，绑定点击事件，将整条评论删除( removeChild() )
功能四:统计字数
通过input事件监听内容文本框的输入，剩余字数 = 总字数 - 文本框内容长度
#三．今日小结
1.监听文本框输入事件: input
2.类名的添加和删除: classList.add() classList.remove()
3.节点的创建和删除: document.appendChild() document.removeChild()
4.下一个元素兄弟: nextElemenSibling
5.DOM2级事件绑定: **addEventListener( ** ‘事件类型’,function(){})
#四．作业 -- 三级菜单
效果图:
功能要求：
1. 鼠标经过菜单高亮显示，具体样式参考录屏演示
2. 点击+号可以展开（显示）子菜单
3. 点击-号可以折叠（隐藏）子菜单
4. 注意展开与折叠时找到对应关系，点击一级菜单，二级菜单发生切换，点二级三级子菜单发生切换