jquery实现多级文件夹折叠菜单效果代码
代码语言:html
所属分类:菜单导航
代码描述:jquery实现多级文件夹折叠菜单效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> * { margin: 0; padding: 0; } body { padding: 100px; background: white; font-size: 100%; font-family: "Arial"; } input { font-size: 1em; } ol.tree { padding-left: 30px; } li { list-style-type: none; color: #fff; position: relative; margin-left: -15px; } li label { padding-left: 37px; cursor: pointer; background: url("//repo.bfw.wiki/bfwrepo/image/5fb5d447c7bbd.png") no-repeat 15px 2px; display: block; } li input { width: 1em; height: 1em; position: absolute; left: -0.5em; top: 0; opacity: 0; cursor: pointer; } li input + ol { height: 1em; margin: -16px 0 0 -44px; background: url("//repo.bfw.wiki/bfwrepo/image/5fb5d4972cdd7.png") no-repeat 40px 0; } li input + ol > li { display: none; margin-left: -14px !important; padding-left: 1px } li.file { margin-left: -1px !important; } li.file a { display: inline-block; padding-left: 21px; color: #fff; text-decoration: none; background: url("//repo.bfw.wiki/bfwrepo/image/5fb5d4b842b1e.png") no-repeat 0 0; } li input:checked + ol { height: auto; margin: -21px 0 0 -44px; padding: 25px 0 0 80px; background: url("//repo.bfw.wiki/bfwrepo/image/5fb5d4d3440cc.png") no-repeat 40px 5px; } li input:checked + ol > li { display: block; margin: 0 0 0.063em; } li input:checked + ol > li:first-child { margin: 0 0 0.125em; } </style> </head> <body translate="no"> <ol class="tree"> <li> <label for="menu-1">menu-1</label> <input type="checkbox" checked id="menu-1" /> <ol> <li> <label for="menu-1-1">menu-1-1</label> <input type="checkbox" id="menu-1-1" /> <ol> <li> <label for="menu-1-1-1">menu-1-1-1</label> <input type="checkbox" id="menu-1-1-1" /> <ol> <li> <label for="menu-1-1-1-1">menu-1-1-1-1</label> <input type="checkbox" id="menu-1-1-1-1" /> <ol> <li class="file"><a href="">menu-1-1-1-1-1</a></li> <li class="file"><a href="">menu-1-1-1-1-2</a></li> <li class="file"><a href="">menu-1-1-1-1-3</a></li> </ol> </li> <li class="file"><a href="">menu-1-1-1-2</a></li> <li class="file"><a href="">menu-1-1-1-3</a></li> <li class="file"><a href="">menu-1-1-1-4</a></li> <li class="file"><a href="">menu-1-1-1-5</a></li> <li class="file"><a href="">menu-1-1-1-6</a></li> </ol> </li> <li class="file"><a href="">menu-1-1-2</a></li> <li class="file"><a href="">menu-1-1-3</a></li> <li class="file"><a href="">menu-1-1-4</a></li> </ol> </li> <li class="file"><a href="">menu-1-2</a></li> <li class="file"><a href="">menu-1-3</a></li> </ol> </li> <li> <label for="menu-2">menu-2</label> <input type="checkbox" id="menu-2" /> <ol> <li> <label for="menu-2-1">menu-2-1</label> <input type="checkbox" id="menu-2-1" /> <ol> <li> <label for="menu-2-1-1">menu-2-1-1</label> <input type="checkbox" id="menu-2-1-1" /> <ol> <li class="file"><a href="">menu-2-1-1-1</a></li> <li class="file"><a href="">menu-2-1-1-2</a></li> <li class="file"><a href="">menu-2-1-1-3</a></li> <li class="file"><a href="">menu-2-1-1-4</a></li> <li class="file"><a href="">menu-2-1-1-5</a></li> </ol> </li> <li class="file"><a href="">menu-2-1-2</a></li> <li class=".........完整代码请登录后点击上方下载按钮下载查看
网友评论0