html 二级栏目js代码,实现js二级菜单

图片发自简书App

我们先来说一下，二级菜单：

应用较为广泛，在我们熟知一些购物网站，选择分类时会用到二级三级甚至更多，供我们选择，较为方便。

下面我们就开始：

图片发自简书App

样式

写出我们要表现出的样式

body,ul {

margin: 0;

padding: 0;

}

.active {

background-color: mediumvioletred;

color: #fff;

}

ul {

margin-top: 10px;

width: 200px;

}

ul li {

list-style: none;

/* font-size: 10px; */

text-indent: 1cm;

/* margin-top: 20px; */

padding: 10px;

}

#nav {

width: 400px;

height: 404px;

border: 1px solid #333;

position: absolute;

left: 200px;

top: 0;

}

#wrap {

position: relative;

width: 500px;

height: 600px;

}

结构

• 下写出我们要用鼠标滑过的框，是一个菜单

nav 我们滑过上面由

• 写出的框 而出现的菜单 滑过事件 滑过li显示nav

• list1
• list2
• list3
• list4
• list5
• list6
• list7
• list8
• list9
• list10

坂口小可爱

js部分

//获取id

var a = function(id) {

return document.getElementById(id);

}

//获取ul下面的所有li

var wrapuli = a('uli').children;

//设置一个空的对象

var flag;

console.log(wrapuli);

//遍历所有li

for(var j = 0; j < wrapuli.length; j++) {

//写一个自执行函数

(function(k) {

//li的鼠标滑过事件 鼠标滑过li 让它改变颜色 取一个新的元素名 active 并设置颜色 字体颜色 更简单明了的看出是否有滑过的样式

wrapuli[j].onmouseover = function() {

wrapuli[k].className = 'active';

//而nav的样式为显示 表示滑过li nav框也出现

a('nav').style.display = 'block';

//空的对象等于形参k

flag = k;

}

//离开事件

wrapuli[j].onmouseout = function() {

//没触发时 li没有样式

wrapuli[k].className = '';

//nav框隐藏

a('nav').style.display = 'none';

}

})(j);//调用

}

//鼠标划过事件

a('nav').onmouseover = function() {

//滑过 nav显示

a('nav').style.display = 'block';

//li也显示触发效果

wrapuli[flag].className = 'active';

}

//鼠标离开事件

a('nav').onmouseout = function() {

//nav框隐藏

a('nav').style.display = 'none';

//同上

wrapuli[flag].className = '';

}