您的位置:首页 > Web前端 > JavaScript

html5+javascript+css3实现下拉列表以及折叠功能

2015-10-19 11:12 661 查看
html5+javascript+css3实现下拉列表以及折叠功能

function show(id){
var d = $('#content'+id).css('display');
if(d == 'block'){
$('#content'+id).css('display','none');
$('#img'+id).attr('src','img/bottom.png');
}else if(d == 'none'){
$('.drop_down_content').each(function(){
$(this).css('display','none');
$('.drop_down_list img').attr('src','img/bottom.png');
});
$('#content'+id).css('display','block');
$('#img'+id).attr('src','img/top.png');
}
}


<div class="drop_down_list" onclick="show('1');">
<a>svg</a>
<img id="img1" src="img/top.png"/>
</div>
<ul class="drop_down_content" id="content1" style="display:block;">
<li>姓名   <a>李雷</a></li>
</ul>
<div class="drop_down_list" onclick="show('2');">
<a>动画</a>
<img id="img2" src="img/bottom.png"/>
</div>
<ul class="drop_down_content" id="content2" style="display:none;">
<li>父亲   <a>李大宝</a></li>
</ul>


ul{
list-style-type: none;
-webkit-margin-before: 0px;
-webkit-margin-after: 0px;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 0px;
-webkit-padding-after: 0px;
}
.drop_down_list{
width:100%;
height:44px;
border-bottom: 1px solid #D9D9D9;
}
.drop_down_list a{
display: inline-block;
height:44px;
width:100px;
background: url(../img/biaozhu.png) 0px 13px no-repeat;
background-size: 6px 20px;
padding-left: 25px;
padding-top: 12px;
color: #0085d0;
}
.drop_down_list img{
float: right;
height:15px;
margin: 15px 20px;
}
.drop_down_content a{
color: #AAAAAA;
display: inline-block;
float: right;
margin-right: 8%;
}
.drop_down_content li{
height:38px;
width:94%;
color: #353535;
margin-left: 3%;
margin-right: 3%;
padding-top: 15px;
padding-left: 20px;
border-bottom: 1px solid #D9D9D9;
}






内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: