html5+css3+jquery下拉收缩展开菜单
工具/原料
adobedreamweaver
方法/步骤
1、准备好需要用到的图标。
2、新建html文档。
3、书写hmtl代艨位雅剖码。<center><dlclass="list_dl媪青怍牙"><dtclass="list_dt"><spanclass="_after"></span><p>选择器</p><iclass="list_dt_icon"></i></dt><ddclass="list_dd"><ul><liclass="list_li">#id</li><liclass="list_li">element</li><liclass="list_li">.class</li><liclass="list_li">*</li></ul></dd><dtclass="list_dt"><spanclass="_after"></span><p>属性</p><iclass="list_dt_icon"></i></dt><ddclass="list_dd"><ul><liclass="list_li">attr</li><liclass="list_li">removeAttr</li><liclass="list_li">prop</li><liclass="list_li">removeProp</li><liclass="list_li">addClass</li><liclass="list_li">removeClass</li></ul></dd><dtclass="list_dt"><spanclass="_after"></span><p>文档处理</p><iclass="list_dt_icon"></i></dt><ddclass="list_dd"><ul><liclass="list_li">append</li><liclass="list_li">appendTo</li><liclass="list_li">prepend</li><liclass="list_li">prependTo</li><liclass="list_li">after</li><liclass="list_li">before</li></ul></dd><dtclass="list_dt"><spanclass="_after"></span><p>事件</p><iclass="list_dt_icon"></i></dt><ddclass="list_dd"><ul><liclass="list_li">ready</li><liclass="list_li">on</li><liclass="list_li">off</li><liclass="list_li">bind</li><liclass="list_li">one</li><liclass="list_li">trigger</li><liclass="list_li">hover</li><liclass="list_li">click</li><liclass="list_li">focus</li></ul></dd><dtclass="list_dt"><spanclass="_after"></span><p>AJAX</p><iclass="list_dt_icon"></i></dt><ddclass="list_dd"><ul><liclass="list_li">$.ajax</li><liclass="list_li">$.get</li><liclass="list_li">$.getJSON</li><liclass="list_li">$.getScript</li><liclass="list_li">$.post</li></ul></dd><dtclass="list_dt"><spanclass="_after"></span><p>效果</p><iclass="list_dt_icon"></i></dt><ddclass="list_dd"><ul><liclass="list_li">show</li><liclass="list_li">hide</li><liclass="list_li">toggle</li><liclass="list_li">slideDown</li><liclass="list_li">slideUp</li><liclass="list_li">slideToggle</li><liclass="list_li">fadeIn</li><liclass="list_li">fadeOut</li><liclass="list_li">fadeTo</li><liclass="list_li">fadeToggle</li><liclass="list_li">stop</li></ul></dd></dl></center>
4、书写css代码跷孳岔养。*{margin:0;padding:0;font-family:&qu泠贾高框ot;MicrosoftYaHei",Arial,sans-serif;font-size:14px;}.list_dt{background:#333;color:white;width:120px;padding:040px020px;height:34px;line-height:34px;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;position:relative;border-bottom:1pxsolid#464646;}.list_dt:hover{background:#222;}.list_dt:hover._after{display:block;width:3px;height:100%;position:absolute;left:0;top:0;background:#4285F4;}#open{background:#222;}#open._after{display:block;width:3px;height:100%;position:absolute;left:0;top:0;background:#4285F4;}.list_dt_icon{position:absolute;right:10px;top:9px;display:block;width:16px;height:16px;background:url("../images/off.png")no-repeat;}#open.list_dt_icon{background:url("../images/open.png")no-repeat;}.list_dd{display:none;}.list_li{background:#4e4e4e;list-style-type:none;color:white;width:120px;padding:030px;height:34px;line-height:34px;cursor:pointer;border-bottom:1pxsolid#6b6b6b;}.list_li:hover{background:#4285F4;}
5、书写并添加js代码。<scriptsrc="js/jquery.min.js"></script><script>$(".list_dt").on("click",function(){ $('.list_dd').stop(); $(this).siblings("dt").removeAttr("id"); if($(this).attr("id")=="open"){ $(this).removeAttr("id").siblings("dd").slideUp(); }else{ $(this).attr("id","open").next().slideDown().siblings("dd").slideUp(); }});</script>
6、代码整体结构。
7、查看效果。
