Bootstrap tree-shaped menu

Reference Address http://jsfiddle.net/jhfrench/GpdgF/

HTML section

<divclass="Tree Well"> <ul> <li> <span><iclass="Glyphicon Glyphicon-folder-open"></i> parent</span> <a href="">goes somewhere</a> <ul> <li> <span><iclass="Glyphicon glyphicon-minus-sign"></i> child</span> <a href="">goes somewhere</a> <ul> <li> <span><iclass="Glyphicon glyphicon-leaf"></i> Grand child</span> <a href="">goes somewhere</a> </li> </ul> </li> <li> <span><iclass="Glyphicon glyphicon-minus-sign"></i> child</span> <a href="">goes somewhere</a> <ul> <li> <span><iclass="Glyphicon glyphicon-leaf"></i> Grand child</span> <a href="">goes somewhere</a> </li> <li> <span><iclass="Glyphicon glyphicon-minus-sign"></i> Grand child</span> <a href="">goes somewhere</a> <ul> <li> <span><iclass="Glyphicon glyphicon-minus-sign"></i> great Grand child</span> <a href="">goes somewhere</a> <ul> <li> <span><iclass="Glyphicon glyphicon-leaf"></i> great great Grand child</span> <a href="">goes somewhere</a> </li> <li> <span><iclass="Glyphicon glyphicon-leaf"></i> great great Grand child</span> <a href="">goes somewhere</a> </li> </ul> </li> <li> & Lt;span><iclass="Glyphicon glyphicon-leaf"></i> great Grand child</span> <a href="">goes somewhere</a> </li> <li> <span><iclass="Glyphicon glyphicon-leaf"></i> great Grand child</span> <a href="">goes somewhere</a> </li> </ul> </li> <li> <span>< Iclass="Glyphicon glyphicon-leaf"></i> Grand child</span> <a href="">goes somewhere</a> </li> </ul> </li> </ul> </li> <li> < Span><iclass="Glyphicon Glyphicon-folder-open"></i> parent2</span> <a href="">goes somewhere</a> <ul> <li> <span><iclass="Glyphicon glyphicon-leaf"></i> child</span> <a href="">goes somewhere</a> </li> </ul> </li> </ul></div>

JS section

<script src="Http://code.jquery.com/jquery-2.1.0.min.js"></script> <script>$ (function () {$ ('. Tree Li:has (UL)'). AddClass ('Parent_li'). Find ('> Span'). attr ('title','Collapse This branch'); $('. Tree Li.parent_li > Span'). On ('Click', Function (e) {varChildren = $ ( This). Parent ('Li.parent_li'). Find ('> Ul > Li'); if(Children. is(": Visible") {children.hide ('Fast'); $( This). attr ('title','Expand This branch'). Find ('> I'). AddClass ('icon-plus-sign'). Removeclass ('icon-minus-sign'); } Else{children.show ('Fast'); $( This). attr ('title','Collapse This branch'). Find ('> I'). AddClass ('icon-minus-sign'). Removeclass ('icon-plus-sign');  } e.stoppropagation ();  });}); </script>

CSS Section

. 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:inset01px 1px Rgba (0,0,0,0.05); -moz-box-shadow:inset01px 1px Rgba (0,0,0,0.05); Box-shadow:inset01px 1px Rgba (0,0,0,0.05)}.tree li {list-style-Type:none; Margin:0; padding:10px 5px05px; 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: -%; 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:# the}

Bootstrap tree-shaped menu