三级联动动态添加背景颜色。
本次实现的是给三级联动添加背景颜色。即如下图般的效果。
修改css样式实现
首先查阅代码,发现类名为item的div标签控制三级标签的展示。如下图所示。因此如果通过css实现上述功能只需要给item设置hover即可。如下图所示。
通过JS实现功能
实现思路
通过js实现功能的思路如下,给每个一级标签绑定一个鼠标进入的事件,当鼠标进入后,获取鼠标所在标签的索引值,通过索引值给标签添加背景。具体实现过程如下
首先定义data中的currentIndex这个数据用来代表鼠标所在位置的索引值。由于刚进入页面不需要给一级标签添加背景色,因此默认currentIndex为-1。接下来设置一个新的cur类(用以改变背景色)。随后为一级标签所在的h3标签添加鼠标进入事件即@mouseenter。当鼠标进入时获取所在标签的索引值,并通过索引判断是否应该添加cur类。在设置完后,此时当鼠标放在一级标签时,背景色就添加完毕了,但是此时鼠标移出背景色还在,因此需要在设置一个鼠标移出事件。
鼠标移出事件较为特殊,为了使用户体验得到更好的提升,通过事件委派让鼠标移出的范围扩大一些。
具体流程为,首先将三级组件所在的div与h2标签同时放入一个新的div盒子中,将鼠标移出事件绑定在这个新盒子中即可。具体代码以及过程图如下所示。
鼠标移入步骤图
鼠标移出步骤图
二三级分类显示与隐藏实现方法
首先展示一下应有的效果
CSS实现
利用css实现的原理时当鼠标放在一级标题处,二三级标题将默认的display:none改为display:block,如下图所示。
JS实现
JS实现只需要动态绑定style样式即可。
如下图所示