js下 Day07、DOM案例

一．折叠菜单

效果图:

功能思路分析:

功能一:数据渲染

\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. 注意展开与折叠时找到对应关系，点击一级菜单，二级菜单发生切换，点二级三级子菜单发生切换