伸缩导航-竖向可收缩、展开的导航
2012-02-17 20:27
302 查看
实现效果:第一次点击展开,再点击收起。
js代码:
function contract(closeClass, openClass, contBox){ function getElementsByClass(searchClass,node,tag) { var classElements = new Array(); if ( node == null ) node = document; if ( tag == null ) tag = '*'; var els = node.getElementsByTagName(tag); var elsLen = els.length; var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)"); for (i = 0, j = 0; i < elsLen; i++) { if ( pattern.test(els[i].className) ) { classElements[j] = els[i]; j++; } } return classElements; } function toggleDisplay(element){ if (element.style.display != 'block'){ element.style.display = 'block'; } else{ element.style.display = 'none'; } } function toggleClass(element, newClass){ var classOld = element.className; if (classOld.indexOf(newClass) > -1){ element.className = classOld.replace(newClass, '') } else{ element.className = classOld + " " + newClass; } } var navArray = getElementsByClass(closeClass), boxArray = getElementsByClass(contBox), len = navArray.length; for (var i = 0; i < len; i++){(function(i){ navArray[i].onclick = function(){ toggleClass(this, openClass); toggleDisplay(boxArray[i]); } })(i) } } contract('btn_close', 'btn_open', 'cont_box');
使用说明:收缩函数contract的3个参数按顺序分别是
closeClass:一级导航"闭合"时样式类名;
openClass:一级导航"打开"时样式类名;
contBox:二级导航"框"样式类名(收缩隐藏的框)。
html代码:
<div class="btn_close btn_open">导航一</div> <ul class="cont_box" style="display:block"> <li><a href="#">• 二级导航内容链接</a></li> <li><a href="#">• 二级导航内容链接</a></li> <li><a href="#">• 二级导航内容链接</a></li> <li><a href="#">• 二级导航内容链接</a></li> <li><a href="#">• 二级导航内容链接</a></li> </ul> <div class="btn_close">导航二</div> <ul class="cont_box"> <li><a href="#">• 二级导航内容链接</a></li> <li><a href="#">• 二级导航内容链接</a></li> </ul> <div class="btn_close">导航三</div> <ul class="cont_box"> <li><a href="#">• 二级导航内容链接</a></li> </ul> <div class="btn_close">导航四</div> <ul class="cont_box"> <li><a href="#">• 二级导航内容链接</a></li> <li><a href="#">• 二级导航内容链接</a></li> </ul>
css代码:
body,div,ul,li{ margin:0; padding:0;} ul{list-style:none;} .btn_open,.btn_close{ width:226px; height:20px; padding:6px 0 0 10px; margin:5px auto 0; font:bold 14px "宋体"; color:#fff; background-color:#666; cursor:pointer;} .btn_open{ background-color:#069!important; color:#f00!important} .cont_box{ display:none; width:236px; margin:0 auto; padding-bottom:10px; background-color:#b4ebeb;} .cont_box li{ padding:5px 5px 0;} .cont_box li a{ color:#000;}
相关文章推荐
- 三级导航菜单,三级竖向展开/收缩导航菜单
- JS之三级竖向展开/收缩导航菜单
- 三级导航菜单,三级竖向展开/收缩导航菜单
- jquary 效果之——导航菜单竖向展开
- 导航面板[ExtJS4]ExtJS4左边菜单面板收缩展开,右边TabPanel内容动态更新(解决宽度不能自适应问题)
- jquery实现红色竖向多级向右展开的导航菜单效果
- 导航菜单收缩展开程序
- jquery实现红色竖向多级向右展开的导航菜单效果
- 折叠展开收缩效果的栏目分类导航
- jquery实现点击向下展开菜单项(伸缩导航)效果
- jQuery 导航菜单点击伸缩展开效果的JS特效
- 折叠展开收缩效果的栏目分类导航
- JS右下角广告窗口代码(可收缩、展开及关闭)
- 点击UITableView的cell展开收缩
- jQuery实现可收缩展开的级联菜单实例代码
- JS+CSS实现另类带提示效果的竖向导航菜单
- 如何实现 TreeView Items 全部展开和全部收缩(WPF)
- 分享一下,树形数据窗口双击那一层自动展开或收缩(数据窗口DoubleClicked事件中处理)
- jquery打造的竖向伸缩菜单