Treeview, bootstrap support
A Pen by AxeLVaisper on CodePen.
<div id="collapseDVR3" class="panel-collapse collapse in"> | |
<div class="tree "> | |
<ul> | |
<li> <span><i class="fa fa-folder-open"></i> Менюшка</span> | |
<ul> | |
<li> <span><i class="fa fa-minus-square"></i> другая Менюшка</span> | |
<ul> | |
<li> <span> ещё одна Менюшка </span> </li> | |
</ul> | |
</li> | |
<li> <span><i class="fa fa-minus-square"></i> другая </span> | |
<ul> | |
<li> <span> Менюшка </span></li> | |
<li> <span><i class="fa fa-minus-square"></i> Менюшка</span> | |
<ul> | |
<li> <span><i class="fa fa-minus-square"></i> Менюшка</span> | |
<ul> | |
<li> <span> Менюшка</span></li> | |
<li> <span> Менюшка</span></li> | |
</ul> | |
</li> | |
<li> <span> Менюшка</span> </li> | |
<li> <span> Менюшка</span> </li> | |
</ul> | |
</li> | |
<li> <span> Менюшка</span></li> | |
</ul> | |
</li> | |
</ul> | |
</li> | |
<li> <span><i class="fa fa-folder-open"></i> Менюшка2</span> | |
<ul> | |
<li> <span> Менюшка</span> </li> | |
</ul> | |
</li> | |
</ul> | |
</div> | |
</div> |
$(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 children = $(this).parent('li.parent_li').find(' > ul > li'); | |
if (children.is(":visible")) { | |
children.hide('fast'); | |
$(this).attr('title', 'Expand this branch').find(' > i').addClass('fa-plus-square').removeClass('fa-minus-square'); | |
} else { | |
children.show('fast'); | |
$(this).attr('title', 'Collapse this branch').find(' > i').addClass('fa-minus-square').removeClass('fa-plus-square'); | |
} | |
e.stopPropagation(); | |
}); | |
}); |
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/js/bootstrap.min.js"></script> |
/* original idea http://www.bootply.com/phf8mnMtpe */ | |
.tree { | |
min-height:20px; | |
padding:19px; | |
margin-bottom:20px; | |
background-color:#fbfbfb; | |
-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:30px; | |
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 | |
} |
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" /> | |
<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" /> |
Treeview, bootstrap support
A Pen by AxeLVaisper on CodePen.