html列表隐藏显示出来,列表显示隐藏.html

Document

body,

div,

ul,

li,

h2 {

margin: 0;

padding: 0;

}

body {

font: 12px/1.5 Tahoma;

}

ul {

list-style-type: none;

}

.container {

width: 200px;

border: 1px solid #aaa;

margin: 10px auto auto auto;

}

.container h2 {

cursor: pointer;

color: #57646E;

font-size: 14px;

font-weight: 400;

border: 1px solid;

height: 30px;

line-height: 30px;

padding-left: 10px;

background: #ced3d7;

border-color: #fff #e9edf2;

}

.container ul {

border-top: 1px solid #DEE3E6;

}

.container li {

height: 25px;

line-height: 25px;

vertical-align: top;

}

.container a {

display: block;

color: #6b7980;

background: #e9edf2;

text-decoration: none;

padding: 0 10px;

}

.container a:hover {

background: #fff;

text-decoration: underline;

}

#list{

display: none;

}

播放列表

• 周杰伦-东风破
• 周杰伦-七里香
• 周杰伦-发如雪
• 周杰伦-稻香
• 周杰伦-告白气球

window.onload = function(){

var btn = document.getElementsByTagName("h2")[0];

var list = document.getElementById("list");

btn.onclick = function(){

if(list.style.display == "block"){

list.style.display = "none";

}else{

list.style.display = "block";

}

}

list.blur = function(){

list.style.display = "none";

}

}

一键复制

编辑

Web IDE

原始数据

按行查看

历史