这篇文章给自己提个醒,今天做一个小Demo的时候,鼠标单击第二下列表ul才隐藏,是因为我把ul的display:block写在了样式表内,而js是无法获取css样式表里的内容的,只能获取行内样式或者是js创造的css样式(也是行内样式);
<!--
作者:shsgear@qq.com
时间:2016-10-26
描述:单一按钮显示和隐藏
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#outer{
width: 220px;
border: 1px solid #CCC;
margin: 250px auto;
}
#outer h2{
box-sizing: border-box;
width:100%;
height: 38px;
border-bottom:1px solid #CCC;
background:url(img/arrow_carrot_up_alt_16px_1143265_easyicon.net.png) no-repeat dimgrey center right;
background-position-x:180px;
font: 20px "微软雅黑";
padding-left: 15px;
line-height: 38px;
cursor: pointer;
}
#outer h2.showUl{
background:url(img/down_arrow_head_16px.png) no-repeat dimgrey center right;
background-position-x:180px;
}
#outer ul{
width: 100%;
box-sizing: border-box;
padding: 5px;
padding-left: 15px;
display: block;
}
#outer ul li{
display: block;
width: 100%;
height: 30px;
}
#outer li a{
display: block;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
text-align:left;
text-decoration: none;
line-height: 30px;
color: #696969;
}
#outer li a:hover{
color: crimson;
}
</style>
</head>
<body>
<div id="outer">
<h2>播放列表</h2>
<ul >
<li><a href="#">小小-容祖儿</a></li>
<li><a href="#">相依为命-陈小春</a></li>
<li><a href="#">特别的人-方大同</a></li>
<li><a href="#">Lighters-Bruno Mars/Royce Da/Eminem</a></li>
<li><a href="#">普通朋友-陶喆</a></li>
<li><a href="#">阴阳先生-三无MarBlue</a></li>
<li><a href="#">Because Of You-Ne-Yo</a></li>
</ul>
</div>
<script>
var oDiv=document.getElementById('outer')
var oToggle = oDiv.getElementsByTagName('h2')[0];
var oUl = oDiv.getElementsByTagName('ul')[0];
window.οnlοad=function(){
oToggle.οnclick=function(){
if(oUl.style.display=='block'){
oUl.style.display='none';
this.className='showUl';
}else{
oUl.style.display='block';
this.className='';
}
}
}
</script>
</body>
</html>