本文已参与「新人创作礼」活动，一起开启掘金创作之路。
🚩京东导航下拉效果
🌿HTML+CSS页面重写
HTML代码过多，查看对应HTML页面。
- 先是html布局
- 再是css样式
- 然后是js下拉
首页导航栏下拉JS开发
重要技能点：鼠标事件的监听实现对应效果的显示隐藏
通过最基本的下拉演示，逐步精简代码，使其成为封装函数，达成对鼠标事件的监听实现显示隐藏。
👇下拉代码第一版：
//导航栏下拉菜单效果
var dropdown = document.getElementById("dropdown");
var dropdownLi = dropdown.getElementsByTagName("li");
console.log(dropdown);
console.log(dropdownLi);
//代码重复性过高 比较适合刚开始学习阶段
dropdownLi[0].onmouseover=function(){
this.classList.add("show");
}
dropdownLi[0].onmouseout=function(){
this.classList.remove("show");
}
dropdownLi[2].onmouseover=function(){
this.classList.add("show");
}
dropdownLi[2].onmouseout=function(){
this.classList.remove("show");
}
dropdownLi[4].onmouseover=function(){
this.classList.add("show");
}
dropdownLi[4].onmouseout=function(){
this.classList.remove("show");
}
dropdownLi[6].onmouseover=function(){
this.classList.add("show");
}
dropdownLi[6].onmouseout=function(){
this.classList.remove("show");
}
👉下拉代码第二版：
通过HTML节点调用的方式，不推荐使用，暂无代码。
下拉代码的封装:
var dropdown = document.getElementById("dropdown");
var dropdownLi = dropdown.getElementsByTagName("li");
for(var i=0;i<dropdownLi.length;i++){
//因为 i为 0和 1的时候没有效果，所以我们要弹出一下
if(i=0 || i=1) continue;
dropdownLi[i].onmouseover=function(){
this.classList.add("show");
}
dropdownLi[i].onmouseout=function(){
this.classList.remove("show");
}
}
总结
❤️美团购全部分类侧边栏开发
🌿HTML+CSS页面重写
HTML代码过多，查看对应HTML页面。
- 先是html布局
- 再是css样式
- 然后是js下拉
JavaScript代码编写
重要技能点：鼠标事件的监听实现对应效果的显示隐藏
通过最基本的下拉演示，逐步精简代码，使其成为封装函数，达成对鼠标事件的监听实现显示隐藏。
👉对比两种效果，其JS实现原理基本一致
//侧边栏显示隐藏
//获取结点
var dropright = document.getElementById("dropright");
var droprightLi = dropright.getElementsByTagName("li");
//循环遍历
for(var i=0;i<droprightLi.length;i++){
droprightLi[i].onmouseover=function(){
this.classList.add("show");
}
droprightLi[i].onmouseout=function(){
this.classList.remove("show");
}
}
