Bootstrap树形菜单,就这么简单
一、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;}