js下拉列表展示

Html

Css

ul,li,h1 {
	padding:0;
	margin:0;
}
li {
	list-style:none;
}
#list {
	width:240px;
	border:1px solid #ccc;
	margin:0 auto;
}
#list .lis {
	width:240px;
}
#list h1 {
	width:240px;
	lin-height:30px;
	text-indent:40px;
	background:red;
}
#list .active {
	background:blue;
}
#list ul {
	display:none;
}
#list ul li {
	line-height:24px;
	border:1px solid #ccc;
	text-indent:24px;
}
#list ul .hover {
	background:#CF0;
}

window.onload = function() {
    var oUl = document.getElementById("list");
    var aH1 = oUl.getElementsByTagName("H1");
    var oU2 = oUl.getElementsByTagName("ul");
    var oLi = null;
    var arrLi = [];

for (var i = 0; i < aH1.length; i++) {
        aH1[i].index = i;
        aH1[i].onclick = function() {
            if (this.className == "") {
                oU2[this.index].style.display = "block";
                this.className = "active";
            } else {
                oU2[this.index].style.display = "none";
                this.className = "";
            }
        }
    }

for (i = 0; i < oU2.length; i++) {
        oLi = oU2[i].getElementsByTagName("li");
        for (j = 0; j < oLi.length; j++) {
            arrLi.push(oLi[j]); //数组中添加新元素
        }

}

for (i = 0; i < arrLi.length; i++) {
        arrLi[i].onclick = function() {
            for (i = 0; i < arrLi.length; i++) {
                arrLi[i].className = "";
            }
            this.className = "hover";
        }
    }

}

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.9.1

立即下载

js下拉列表展示



代码描述：js手风琴下拉列表手写

js手写

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

?╊? Ida

相关代码

我的好友

我的好友

我的好友

js下拉列表展示

最新