Bootstrap树形菜单,就这么简单
来源:互联网 发布:php exec 返回2 编辑:程序博客网 时间:2024/06/11 00:38
一、CSS部分:
.tree { min-height:20px; padding:19px; margin-bottom:20px; background-color:#fbfbfb; border:1px solid #999; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px; -webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05); -moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05); box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05)}.tree li { list-style-type:none; margin:0; padding:10px 5px 0 5px; position:relative}.tree li::before, .tree li::after { content:''; left:-20px; position:absolute; right:auto}.tree li::before { border-left:1px solid #999; bottom:50px; height:100%; top:0; width:1px}.tree li::after { border-top:1px solid #999; height:20px; top:25px; width:25px}.tree li span { -moz-border-radius:5px; -webkit-border-radius:5px; border:1px solid #999; border-radius:5px; display:inline-block; padding:3px 8px; text-decoration:none}.tree li.parent_li>span { cursor:pointer}.tree>ul>li::before, .tree>ul>li::after { border:0}.tree li:last-child::before { height:30px}.tree li.parent_li>span:hover, .tree li.parent_li>span:hover+ul li span { background:#eee; border:1px solid #94a0b4; color:#000}.icon-plus-sign{display:inline-block;width:16px;height:16px;background:url('../Images/bg/ico_small.png') left -44px no-repeat;}.icon-minus-sign{display:inline-block;width:16px;height:16px;background:url('../Images/bg/ico_small.png') left 0px no-repeat;}完全可以自己建一个Css文件,将他们考入,引用。
.tree li::before, .tree li::after {}.tree li::before {}.tree li::after {}
主要用上面三个属性实现树的前面树形线,注意是用css3的before 和after实现
二、HTML部分:
<div class="tree well"> <ul> <li> <span><i class="icon-plus-sign"></i> Parent</span><a href="">Goes somewhere</a> <ul> <li> <span><i class="icon-plus-sign"></i> Child</span> <a href="">Goes somewhere</a> <ul> <li> <span><i class="icon-leaf"></i> Grand Child</span> <a href="">Goes somewhere</a> </li> </ul> </li> <li> <span><i class="icon-plus-sign"></i> Child</span> <a href="">Goes somewhere</a> <ul> <li> <span><i class="icon-leaf"></i> Grand Child</span> <a href="">Goes somewhere</a> </li> <li> <span><i class="icon-plus-sign"></i> Grand Child</span> <a href="">Goes somewhere</a> <ul> <li> <span><i class="icon-plus-sign"></i> Great Grand Child</span> <a href="">Goes somewhere</a> <ul> <li> <span><i class="icon-leaf"></i> Great great Grand Child</span> <a href="">Goes somewhere</a> </li> <li> <span><i class="icon-leaf"></i> Great great Grand Child</span> <a href="">Goes somewhere</a> </li> </ul> </li> <li> <span><i class="icon-leaf"></i> Great Grand Child</span> <a href="">Goes somewhere</a> </li> <li> <span><i class="icon-leaf"></i> Great Grand Child</span> <a href="">Goes somewhere</a> </li> </ul> </li> <li> <span><i class="icon-leaf"></i> Grand Child</span> <a href="">Goes somewhere</a> </li> </ul> </li> </ul> </li> <li> <span><i class="icon-plus-sign"></i> Parent2</span> <a href="">Goes somewhere</a> <ul> <li> <span><i class="icon-leaf"></i> Child</span> <a href="">Goes somewhere</a> </li> </ul> </li> </ul> </div>
三、JQ:
<script type="text/javascript"> var d=true; $(function () { $('.tree li:has(ul)').addClass('parent_li').find(' > span').attr('title', 'Collapse this branch'); $('.tree li.parent_li > span').on('click', function (e) { var d = $(this).siblings('ul').is(":visible"); $(this).siblings('ul').slideToggle('fast');//.siblings('dt').css('background-position','right -40px'); if (d) { console.log($(this).find(">i")); $(this).find(">i").addClass('icon-minus-sign').removeClass('icon-plus-sign'); } else { // $(this).find(' > i').addClass('icon-minus-sign').removeClass('icon-plus-sign'); $(this).find(">i").addClass('icon-plus-sign').removeClass('icon-minus-sign'); } e.stopPropagation(); }); }); </script>
为这两个样式准备
.icon-plus-sign{display:inline-block;width:16px;height:16px;background:url('../Images/bg/ico_small.png') left -44px no-repeat;}.icon-minus-sign{display:inline-block;width:16px;height:16px;background:url('../Images/bg/ico_small.png') left 0px no-repeat;}
阅读全文
0 0
- Bootstrap树形菜单,就这么简单
- 编写bootstrap响应式页面 就这么简单
- bootstrap 树形菜单
- bootstrap树形菜单
- 社会,就这么简单
- 正则就这么简单
- 一切就这么简单
- 爱,就这么简单
- ERP就这么简单
- SqlHelper就这么简单
- 就这么简单
- SqlHelper就这么简单
- Bootstrap 树形菜单小DEMO
- 删除文件就这么简单
- 线程安全,就这么简单
- 入侵ADSL,就这么简单
- 爱,原来就这么简单
- 线程安全,就这么简单
- 远程部署应用程序:一台服务器运行两个tomcat
- Tomcat 配置成Windows服务
- 操作系统刷题(二十)
- Unity Shader之uv旋转
- Android Studio安装完成之后,不能运行的解决办法
- Bootstrap树形菜单,就这么简单
- ztree一级一级加载,解决数据过大加载缓慢问题
- win7 64位安装wamp缺失vcruntime140.dll和api-ms-win-crt-runtime-l1-1-0.dll 等
- 河南电视台:让中原文化“云”中起舞
- xshell中svn命令整理
- linux环境下zookeeper集群搭建
- css 布局
- C++语言 运算符优先级表(转载)
- 【Java】Java中复制/克隆(Clone)一个对象