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

来源：互联网发布：linux 用户权限编辑：程序博客网时间：2024/05/21 02:49

   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;}

0 0