展开和折叠正在运行，但是当列表展开时，我想将字体真棒'+'更改为' - '反之亦然。的 DEMO
Jquery的
$('#ulCollapse li ul').hide();
$('.emplist').each(function() {
// it counts next childs of each parent
//$(this).find('.empDetails > p#leafCount span').text($(this).next('ul').children('li').length);
// it counts total childs of each parent
var childCount = $(this).siblings('ul').find('li').length;
if (childCount > 0)
$(this).find('.empDetails > p#leafCount span').append(childCount);
else
$(this).find('.empDetails > p#leafCount span').text('');
});
//expand collapse
var plusClass = 'fa-plus-circle';
var minusClass = 'fa-minus-circle';
$('.empDetails p#leafCount').css('cursor', 'pointer');
$('.empDetails p#leafCount span').on('click', function() {
var parentDiv = $(this).parents('.emplist').first();
var nextUl = parentDiv.next('ul');
nextUl.toggle();
parentDiv.closest('ul').find('ul').not(nextUl).hide();
});
答案 0 :(得分：0)
您可以使用toggleClass()在fa-minus-circle元素上添加和删除i类：
$('#ulCollapse li ul').hide();
$('.emplist').each(function() {
// it counts next childs of each parent
//$(this).find('.empDetails > p#leafCount span').text($(this).next('ul').children('li').length);
// it counts total childs of each parent
var childCount = $(this).siblings('ul').find('li').length;
if (childCount > 0)
$(this).find('.empDetails > p#leafCount span').append(childCount);
else
$(this).find('.empDetails > p#leafCount span').text('');
});
//expand collapse
var plusClass = 'fa-plus-circle';
var minusClass = 'fa-minus-circle';
$('.empDetails p#leafCount').css('cursor', 'pointer');
$('.empDetails p#leafCount span').on('click', function() {
var parentDiv = $(this).parents('.emplist').first();
var nextUl = parentDiv.next('ul');
nextUl.toggle();
$(this).find('i').toggleClass('fa-minus-circle')
parentDiv.closest('ul').find('ul').not(nextUl).hide();
});
$(document).on('click', '.fa-minus-circle', function() {
$(this).closest('.emplist').next('ul').find('.fa-minus-circle').removeClass('fa-minus-circle');
});li {
list-style: none;
}
/*circle node css*/
.empDetails {
color: #eee;
width: 118px;
height: 52px;
background-color: rgba(83, 139, 184, 0.8);
border-bottom-right-radius: 120px;
border-bottom-left-radius: 120px;
border-top: 0;
margin-top: -45%;
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
overflow: hidden;
text-overflow: ellipsis;
cursor: move;
}
.empDetails p {
padding: 0px;
margin: 0px;
line-height: 15px;
text-align: center;
}
.emp-img img {
width: 120px;
height: 125px;
}
.emplist {
border: 2px solid #538BB8;
display: inline-block;
}
.emplist,
.emplist .emp-img {
position: relative;
width: 120px;
height: 120px;
border-radius: 120px;
}
.emplist {
overflow: hidden;
}
.emp-hover {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: 0;
width: 120px;
height: 120px;
border-radius: 120px;
background-color: rgba(0, 0, 0, 0.80);
opacity: 0;
-webkit-transition: all 0.3s;
transition: all 0.3s;
color: #ff0;
}
.emplist:hover .emp-hover .infoMore {
top: 50%;
}
.emplist:hover .emp-hover,
.emplist:hover .emp-hover .infoMore {
opacity: 1;
}
.emp-hover .infoMore {
position: absolute;
top: 0%;
width: 100%;
opacity: 0;
-webkit-transform: translateY(-55%);
-ms-transform: translateY(-55%);
transform: translateY(-55%);
-webkit-transition: all 0.3s 0.2s;
transition: all 0.3s 0.2s;
padding: 0 20px;
}
.emplist:hover .emp-hover,
.emplist:hover .emp-hover .infoMore {
opacity: 1;
}
.OrgInfo {
font-size: 15px !important;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<ul id="ulCollapse" style="width: 4550px; margin: 0px auto; right: auto; height: 20px; bottom: auto; left: -28px; top: 1px;" class="ui-draggable ui-draggable-handle">
<li parent-id="0" li-id="4938" title="Simon Matthews">
<div class="emplist" style="width: 116px; height: 116px;">
<div class="emp-img" style="font-size: 13px;"><img src="http://192.168.3.130/Focus.Web.Focus8//HRMS/Common/GetEmpPhoto?employeeCode=4938" alt="abc" class="img img-circle img-responsive" style="width: 120px;"></div>
<div id="" class="empDetails" style="font-size: 13px;">
<p class="text-center"> <strong>Simon Matthews</strong></p>
<p id="leafCount" style="cursor: pointer;"><span><i class="fa fa-plus-circle" aria-hidden="true"></i>13</span>
<button title="info" id="btn_empModal0" data-toggle="modal" class="btn btn-xs text-center"><i class="fa fa-info-circle OrgInfo" aria-hidden="true"></i></button>
</p>
</div>
<div !class="emp-hover" style="font-size: 13px;"></div>
</div>
<ul>
<li parent-id="4938" li-id="1742" title="Rima Ahmed" class="nodeActive">
<div class="emplist" style="width: 116px; height: 116px;">
<div class="emp-img" style="font-size: 13px;"><img src="http://192.168.3.130/Focus.Web.Focus8//HRMS/Common/GetEmpPhoto?employeeCode=1742" alt="abc" class="img img-circle img-responsive" style="width: 120px;"></div>
<div id="nodeAct" class="empDetails" style="font-size: 13px;">
<p class="text-center"> <strong>Rima Ahmed</strong></p>
<p id="leafCount" style="cursor: pointer;"><span><i class="fa fa-plus-circle" aria-hidden="true"></i>12</span>
<button title="info" id="btn_empModal1" data-toggle="modal" class="btn btn-xs text-center"><i class="fa fa-info-circle OrgInfo" aria-hidden="true"></i></button>
</p>
</div>
<div !class="emp-hover" style="font-size: 13px;"></div>
</div>
<ul style="display: block;">
<li parent-id="1742" li-id="1737" title="Ambika Amin">
<div class="emplist" style="width: 116px; height: 116px;">
<div class="emp-img" style="font-size: 13px;"><img src="http://192.168.3.130/Focus.Web.Focus8//HRMS/Common/GetEmpPhoto?employeeCode=1737" alt="abc" class="img img-circle img-responsive" style="width: 120px;"></div>
<div id="" class="empDetails" style="font-size: 13px;">
<p class="text-center"> <strong>Ambika Amin</strong></p>
<p id="leafCount" style="cursor: pointer;"><span></span>
<button title="info" id="btn_empModal2" data-toggle="modal" class="btn btn-xs text-center"><i class="fa fa-info-circle OrgInfo fa-minus-circle" aria-hidden="true"></i></button>
</p>
</div>
<div !class="emp-hover" style="font-size: 13px;"></div>
</div>
</li>
<li parent-id="1742" li-id="1738" title="Patricia Bagtas">
<div class="emplist" style="width: 116px; height: 116px;">
<div class="emp-img" style="font-size: 13px;"><img src="http://192.168.3.130/Focus.Web.Focus8//HRMS/Common/GetEmpPhoto?employeeCode=1738" alt="abc" class="img img-circle img-responsive" style="width: 120px;"></div>
<div id="" class="empDetails" style="font-size: 13px;">
<p class="text-center"> <strong>Patricia Bagtas</strong></p>
<p id="leafCount" style="cursor: pointer;"><span></span>
<button title="info" id="btn_empModal3" data-toggle="modal" class="btn btn-xs text-center"><i class="fa fa-info-circle OrgInfo" aria-hidden="true"></i></button>
</p>
</div>
<div !class="emp-hover" style="font-size: 13px;"></div>
</div>
</li>
<li parent-id="1742" li-id="1745" title="Veronica Cotoranu">
<div class="emplist" style="width: 116px; height: 116px;">
<div class="emp-img" style="font-size: 13px;"><img src="http://192.168.3.130/Focus.Web.Focus8//HRMS/Common/GetEmpPhoto?employeeCode=1745" alt="abc" class="img img-circle img-responsive" style="width: 120px;"></div>
<div id="" class="empDetails" style="font-size: 13px;">
<p class="text-center"> <strong>Veronica Cotoranu</strong></p>
<p id="leafCount" style="cursor: pointer;"><span><i class="fa fa-plus-circle" aria-hidden="true"></i>2</span>
<button title="info" id="btn_empModal4" data-toggle="modal" class="btn btn-xs text-center"><i class="fa fa-info-circle OrgInfo" aria-hidden="true"></i></button>
</p>
</div>
<div !class="emp-hover" style="font-size: 13px;"></div>
</div>
<ul style="display: block;">
<li parent-id="1745" li-id="1734" title="Gloria Rolusta">
<div class="emplist" style="width: 116px; height: 116px;">
<div class="emp-img" style="font-size: 13px;"><img src="http://192.168.3.130/Focus.Web.Focus8//HRMS/Common/GetEmpPhoto?employeeCode=1734" alt="abc" class="img img-circle img-responsive" style="width: 120px;"></div>
<div id="" class="empDetails" style="font-size: 13px;">
<p class="text-center"> <strong>Gloria Rolusta</strong></p>
<p id="leafCount" style="cursor: pointer;"><span></span>
<button title="info" id="btn_empModal10" data-toggle="modal" class="btn btn-xs text-center"><i class="fa fa-info-circle OrgInfo fa-minus-circle" aria-hidden="true"></i></button>
</p>
</div>
<div !class="emp-hover" style="font-size: 13px;"></div>
</div>
</li>
<li parent-id="1745" li-id="1757" title="Karla Tenerife">
<div class="emplist" style="width: 116px; height: 116px;">
<div class="emp-img" style="font-size: 13px;"><img src="http://192.168.3.130/Focus.Web.Focus8//HRMS/Common/GetEmpPhoto?employeeCode=1757" alt="abc" class="img img-circle img-responsive" style="width: 120px;"></div>
<div id="" class="empDetails" style="font-size: 13px;">
<p class="text-center"> <strong>Karla Tenerife</strong></p>
<p id="leafCount" style="cursor: pointer;"><span></span>
<button title="info" id="btn_empModal12" data-toggle="modal" class="btn btn-xs text-center"><i class="fa fa-info-circle OrgInfo" aria-hidden="true"></i></button>
</p>
</div>
<div !class="emp-hover" style="font-size: 13px;"></div>
</div>
</li>
</ul>
</li>
<li parent-id="1742" li-id="1746" title="Manaf Hameed">
<div class="emplist" style="width: 116px; height: 116px;">
<div class="emp-img" style="font-size: 13px;"><img src="http://192.168.3.130/Focus.Web.Focus8//HRMS/Common/GetEmpPhoto?employeeCode=1746" alt="abc" class="img img-circle img-responsive" style="width: 120px;"></div>
<div id="" class="empDetails" style="font-size: 13px;">
<p class="text-center"> <strong>Manaf Hameed</strong></p>
<p id="leafCount" style="cursor: pointer;"><span></span>
<button title="info" id="btn_empModal5" data-toggle="modal" class="btn btn-xs text-center"><i class="fa fa-info-circle OrgInfo" aria-hidden="true"></i></button>
</p>
</div>
<div !class="emp-hover" style="font-size: 13px;"></div>
</div>
</li>
<li parent-id="1742" li-id="1747" title="Gerald Vinarao">
<div class="emplist" style="width: 116px; height: 116px;">
<div class="emp-img" style="font-size: 13px;"><img src="http://192.168.3.130/Focus.Web.Focus8//HRMS/Common/GetEmpPhoto?employeeCode=1747" alt="abc" class="img img-circle img-responsive" style="width: 120px;"></div>
<div id="" class="empDetails" style="font-size: 13px;">
<p class="text-center"> <strong>Gerald Vinarao</strong></p>
<p id="leafCount" style="cursor: pointer;"><span></span>
<button title="info" id="btn_empModal6" data-toggle="modal" class="btn btn-xs text-center"><i class="fa fa-info-circle OrgInfo" aria-hidden="true"></i></button>
</p>
</div>
<div !class="emp-hover" style="font-size: 13px;"></div>
</div>
</li>
<li parent-id="1742" li-id="1754" title="Ahmed Zubair">
<div class="emplist" style="width: 116px; height: 116px;">
<div class="emp-img" style="font-size: 13px;"><img src="http://192.168.3.130/Focus.Web.Focus8//HRMS/Common/GetEmpPhoto?employeeCode=1754" alt="abc" class="img img-circle img-responsive" style="width: 120px;"></div>
<div id="" class="empDetails" style="font-size: 13px;">
<p class="text-center"> <strong>Ahmed Zubair</strong></p>
<p id="leafCount" style="cursor: pointer;"><span><i class="fa fa-plus-circle" aria-hidden="true"></i>1</span>
<button title="info" id="btn_empModal7" data-toggle="modal" class="btn btn-xs text-center"><i class="fa fa-info-circle OrgInfo" aria-hidden="true"></i></button>
</p>
</div>
<div !class="emp-hover" style="font-size: 13px;"></div>
</div>
<ul style="display: none;">
<li parent-id="1754" li-id="1759" title="Clark Reyel">
<div class="emplist" style="width: 116px; height: 116px;">
<div class="emp-img" style="font-size: 13px;"><img src="http://192.168.3.130/Focus.Web.Focus8//HRMS/Common/GetEmpPhoto?employeeCode=1759" alt="abc" class="img img-circle img-responsive" style="width: 120px;"></div>
<div id="" class="empDetails" style="font-size: 13px;">
<p class="text-center"> <strong>Clark Reyel</strong></p>
<p id="leafCount" style="cursor: pointer;"><span></span>
<button title="info" id="btn_empModal13" data-toggle="modal" class="btn btn-xs text-center"><i class="fa fa-info-circle OrgInfo" aria-hidden="true"></i></button>
</p>
</div>
<div !class="emp-hover" style="font-size: 13px;"></div>
</div>
</li>
</ul>
</li>
<li parent-id="1742" li-id="4524" title="Sarah Street">
<div class="emplist" style="width: 116px; height: 116px;">
<div class="emp-img" style="font-size: 13px;"><img src="http://192.168.3.130/Focus.Web.Focus8//HRMS/Common/GetEmpPhoto?employeeCode=4524" alt="abc" class="img img-circle img-responsive" style="width: 120px;"></div>
<div id="" class="empDetails" style="font-size: 13px;">
<p class="text-center"> <strong>Sarah Street</strong></p>
<p id="leafCount" style="cursor: pointer;"><span><i class="fa fa-plus-circle" aria-hidden="true"></i>2</span>
<button title="info" id="btn_empModal8" data-toggle="modal" class="btn btn-xs text-center"><i class="fa fa-info-circle OrgInfo" aria-hidden="true"></i></button>
</p>
</div>
<div !class="emp-hover" style="font-size: 13px;"></div>
</div>
<ul style="display: none;">
<li parent-id="4524" li-id="1733" title="Monday Cabales">
<div class="emplist" style="width: 116px; height: 116px;">
<div class="emp-img" style="font-size: 13px;"><img src="http://192.168.3.130/Focus.Web.Focus8//HRMS/Common/GetEmpPhoto?employeeCode=1733" alt="abc" class="img img-circle img-responsive" style="width: 120px;"></div>
<div id="" class="empDetails" style="font-size: 13px;">
<p class="text-center"> <strong>Monday Cabales</strong></p>
<p id="leafCount" style="cursor: pointer;"><span></span>
<button title="info" id="btn_empModal9" data-toggle="modal" class="btn btn-xs text-center"><i class="fa fa-info-circle OrgInfo" aria-hidden="true"></i></button>
</p>
</div>
<div !class="emp-hover" style="font-size: 13px;"></div>
</div>
</li>
<li parent-id="4524" li-id="1755" title="Madhumita Sahoo">
<div class="emplist" style="width: 116px; height: 116px;">
<div class="emp-img" style="font-size: 13px;"><img src="http://192.168.3.130/Focus.Web.Focus8//HRMS/Common/GetEmpPhoto?employeeCode=1755" alt="abc" class="img img-circle img-responsive" style="width: 120px;"></div>
<div id="" class="empDetails" style="font-size: 13px;">
<p class="text-center"> <strong>Madhumita Sahoo</strong></p>
<p id="leafCount" style="cursor: pointer;"><span></span>
<button title="info" id="btn_empModal11" data-toggle="modal" class="btn btn-xs text-center"><i class="fa fa-info-circle OrgInfo" aria-hidden="true"></i></button>
</p>
</div>
<div !class="emp-hover" style="font-size: 13px;"></div>
</div>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
答案 1 :(得分：0)
您可以使用toggleClass()。只需添加以下脚本即可解决您的问题
updated fiddle
//expand collapse
var plusClass = 'fa fa-plus-circle';
var minusClass = 'fa fa-minus-circle';
$('.empDetails p#leafCount').css('cursor', 'pointer');
$('.empDetails p#leafCount span').on('click', function() {
var parentDiv = $(this).parents('.emplist').first();
var nextUl = parentDiv.next('ul');
nextUl.toggle();
parentDiv.closest('ul').find('ul').not(nextUl).hide();
$(this).find('i').toggleClass(plusClass).toggleClass(minusClass);
});
答案 2 :(得分：0)
这是更新版本。当你使用具有相同id的多个元素时，我也已将id更改为类。
$('#ulCollapse li ul').hide();
$('.emplist').each(function() {
// it counts next childs of each parent
//$(this).find('.empDetails > p#leafCount span').text($(this).next('ul').children('li').length);
// it counts total childs of each parent
var childCount = $(this).siblings('ul').find('li').length;
if (childCount > 0)
$(this).find('.empDetails > p.leafCount span').append(childCount);
else
$(this).find('.empDetails > p.leafCount span').text('');
});
//expand collapse
var plusClass = 'fa-plus-circle';
var minusClass = 'fa-minus-circle';
$('.empDetails p.leafCount').css('cursor', 'pointer');
$('.empDetails p.leafCount span').on('click', function() {
var parentDiv = $(this).parents('.emplist').first();
var nextUl = parentDiv.next('ul');
nextUl.toggle();
parentDiv.closest('ul').find('ul').not(nextUl).hide();
$(this).find('i').toggleClass(plusClass).toggleClass(minusClass);
});li{list-style:none;}
/*circle node css*/
.empDetails {
color:#eee;
width: 118px;
height: 52px;
background-color: rgba(83, 139, 184, 0.8);
border-bottom-right-radius: 120px;
border-bottom-left-radius: 120px;
border-top: 0;
margin-top: -45%;
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
overflow: hidden;
text-overflow: ellipsis;
cursor:move;
}
.empDetails p{
padding:0px;
margin:0px;
line-height:15px;
text-align:center;
}
.emp-img img {
width: 120px;
height: 125px;
}
.emplist{
border: 2px solid #538BB8;
display: inline-block;
}
.emplist,
.emplist .emp-img {
position: relative;
width: 120px;
height: 120px;
border-radius: 120px;
}
.emplist {
overflow: hidden;
}
.emp-hover {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: 0;
width: 120px;
height: 120px;
border-radius: 120px;
background-color: rgba(0, 0, 0, 0.80);
opacity: 0;
-webkit-transition: all 0.3s;
transition: all 0.3s;
color:#ff0;
}
.emplist:hover .emp-hover .infoMore {
top: 50%;
}
.emplist:hover .emp-hover,
.emplist:hover .emp-hover .infoMore {
opacity: 1;
}
.emp-hover .infoMore {
position: absolute;
top: 0%;
width: 100%;
opacity: 0;
-webkit-transform: translateY(-55%);
-ms-transform: translateY(-55%);
transform: translateY(-55%);
-webkit-transition: all 0.3s 0.2s;
transition: all 0.3s 0.2s;
padding: 0 20px;
}
.emplist:hover .emp-hover,
.emplist:hover .emp-hover .infoMore {
opacity: 1;
}
.OrgInfo{
font-size:15px !important;
}<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="ulCollapse" style="width: 4550px; margin: 0px auto; right: auto; height: 20px; bottom: auto; left: -28px; top: 1px;" class="ui-draggable ui-draggable-handle">
<li parent-id="0" li-id="4938" title="Simon Matthews">
<div class="emplist" style="width: 116px; height: 116px;">
<div class="emp-img" style="font-size: 13px;"><img src="http://placehold.it/300x300.jpg" alt="abc" class="img img-circle img-responsive" style="width: 120px;"></div>
<div id="" class="empDetails" style="font-size: 13px;">
<p class="text-center"> <strong>Simon Matthews</strong></p>
<p class="leafCount" style="cursor: pointer;"><span><i class="fa fa-plus-circle" aria-hidden="true"></i>13</span>
<button title="info" id="btn_empModal0" data-toggle="modal" class="btn btn-xs text-center"><i class="fa fa-info-circle OrgInfo" aria-hidden="true"></i></button>
</p>
</div>
<div !class="emp-hover" style="font-size: 13px;"></div>
</div>
<ul>
<li parent-id="4938" li-id="1742" title="Rima Ahmed" class="nodeActive">
<div class="emplist" style="width: 116px; height: 116px;">
<div class="emp-img" style="font-size: 13px;"><img src="http://placehold.it/300x300.jpg" alt="abc" class="img img-circle img-responsive" style="width: 120px;"></div>
<div id="nodeAct" class="empDetails" style="font-size: 13px;">
<p class="text-center"> <strong>Rima Ahmed</strong></p>
<p class="leafCount" style="cursor: pointer;"><span><i class="fa fa-plus-circle" aria-hidden="true"></i>12</span>
<button title="info" id="btn_empModal1" data-toggle="modal" class="btn btn-xs text-center"><i class="fa fa-info-circle OrgInfo" aria-hidden="true"></i></button>
</p>
</div>
<div !class="emp-hover" style="font-size: 13px;"></div>
</div>
<ul style="display: block;">
<li parent-id="1742" li-id="1737" title="Ambika Amin">
<div class="emplist" style="width: 116px; height: 116px;">
<div class="emp-img" style="font-size: 13px;"><img src="http://placehold.it/300x300.jpg" alt="abc" class="img img-circle img-responsive" style="width: 120px;"></div>
<div id="" class="empDetails" style="font-size: 13px;">
<p class="text-center"> <strong>Ambika Amin</strong></p>
<p class="leafCount" style="cursor: pointer;"><span></span>
<button title="info" id="btn_empModal2" data-toggle="modal" class="btn btn-xs text-center"><i class="fa fa-info-circle OrgInfo fa-minus-circle" aria-hidden="true"></i></button>
</p>
</div>
<div !class="emp-hover" style="font-size: 13px;"></div>
</div>
</li>
<li parent-id="1742" li-id="1738" title="Patricia Bagtas">
<div class="emplist" style="width: 116px; height: 116px;">
<div class="emp-img" style="font-size: 13px;"><img src="http://placehold.it/300x300.jpg" alt="abc" class="img img-circle img-responsive" style="width: 120px;"></div>
<div id="" class="empDetails" style="font-size: 13px;">
<p class="text-center"> <strong>Patricia Bagtas</strong></p>
<p class="leafCount" style="cursor: pointer;"><span></span>
<button title="info" id="btn_empModal3" data-toggle="modal" class="btn btn-xs text-center"><i class="fa fa-info-circle OrgInfo" aria-hidden="true"></i></button>
</p>
</div>
<div !class="emp-hover" style="font-size: 13px;"></div>
</div>
</li>
<li parent-id="1742" li-id="1745" title="Veronica Cotoranu">
<div class="emplist" style="width: 116px; height: 116px;">
<div class="emp-img" style="font-size: 13px;"><img src="http://placehold.it/300x300.jpg" alt="abc" class="img img-circle img-responsive" style="width: 120px;"></div>
<div id="" class="empDetails" style="font-size: 13px;">
<p class="text-center"> <strong>Veronica Cotoranu</strong></p>
<p class="leafCount" style="cursor: pointer;"><span><i class="fa fa-plus-circle" aria-hidden="true"></i>2</span>
<button title="info" id="btn_empModal4" data-toggle="modal" class="btn btn-xs text-center"><i class="fa fa-info-circle OrgInfo" aria-hidden="true"></i></button>
</p>
</div>
<div !class="emp-hover" style="font-size: 13px;"></div>
</div>
<ul style="display: block;">
<li parent-id="1745" li-id="1734" title="Gloria Rolusta">
<div class="emplist" style="width: 116px; height: 116px;">
<div class="emp-img" style="font-size: 13px;"><img src="http://placehold.it/300x300.jpg" alt="abc" class="img img-circle img-responsive" style="width: 120px;"></div>
<div id="" class="empDetails" style="font-size: 13px;">
<p class="text-center"> <strong>Gloria Rolusta</strong></p>
<p class="leafCount" style="cursor: pointer;"><span></span>
<button title="info" id="btn_empModal10" data-toggle="modal" class="btn btn-xs text-center"><i class="fa fa-info-circle OrgInfo fa-minus-circle" aria-hidden="true"></i></button>
</p>
</div>
<div !class="emp-hover" style="font-size: 13px;"></div>
</div>
</li>
<li parent-id="1745" li-id="1757" title="Karla Tenerife">
<div class="emplist" style="width: 116px; height: 116px;">
<div class="emp-img" style="font-size: 13px;"><img src="http://placehold.it/300x300.jpg" alt="abc" class="img img-circle img-responsive" style="width: 120px;"></div>
<div id="" class="empDetails" style="font-size: 13px;">
<p class="text-center"> <strong>Karla Tenerife</strong></p>
<p class="leafCount" style="cursor: pointer;"><span></span>
<button title="info" id="btn_empModal12" data-toggle="modal" class="btn btn-xs text-center"><i class="fa fa-info-circle OrgInfo" aria-hidden="true"></i></button>
</p>
</div>
<div !class="emp-hover" style="font-size: 13px;"></div>
</div>
</li>
</ul>
</li>
<li parent-id="1742" li-id="1746" title="Manaf Hameed">
<div class="emplist" style="width: 116px; height: 116px;">
<div class="emp-img" style="font-size: 13px;"><img src="http://placehold.it/300x300.jpg" alt="abc" class="img img-circle img-responsive" style="width: 120px;"></div>
<div id="" class="empDetails" style="font-size: 13px;">
<p class="text-center"> <strong>Manaf Hameed</strong></p>
<p class="leafCount" style="cursor: pointer;"><span></span>
<button title="info" id="btn_empModal5" data-toggle="modal" class="btn btn-xs text-center"><i class="fa fa-info-circle OrgInfo" aria-hidden="true"></i></button>
</p>
</div>
<div !class="emp-hover" style="font-size: 13px;"></div>
</div>
</li>
<li parent-id="1742" li-id="1747" title="Gerald Vinarao">
<div class="emplist" style="width: 116px; height: 116px;">
<div class="emp-img" style="font-size: 13px;"><img src="http://placehold.it/300x300.jpg" alt="abc" class="img img-circle img-responsive" style="width: 120px;"></div>
<div id="" class="empDetails" style="font-size: 13px;">
<p class="text-center"> <strong>Gerald Vinarao</strong></p>
<p class="leafCount" style="cursor: pointer;"><span></span>
<button title="info" id="btn_empModal6" data-toggle="modal" class="btn btn-xs text-center"><i class="fa fa-info-circle OrgInfo" aria-hidden="true"></i></button>
</p>
</div>
<div !class="emp-hover" style="font-size: 13px;"></div>
</div>
</li>
<li parent-id="1742" li-id="1754" title="Ahmed Zubair">
<div class="emplist" style="width: 116px; height: 116px;">
<div class="emp-img" style="font-size: 13px;"><img src="http://placehold.it/300x300.jpg" alt="abc" class="img img-circle img-responsive" style="width: 120px;"></div>
<div id="" class="empDetails" style="font-size: 13px;">
<p class="text-center"> <strong>Ahmed Zubair</strong></p>
<p class="leafCount" style="cursor: pointer;"><span><i class="fa fa-plus-circle" aria-hidden="true"></i>1</span>
<button title="info" id="btn_empModal7" data-toggle="modal" class="btn btn-xs text-center"><i class="fa fa-info-circle OrgInfo" aria-hidden="true"></i></button>
</p>
</div>
<div !class="emp-hover" style="font-size: 13px;"></div>
</div>
<ul style="display: none;">
<li parent-id="1754" li-id="1759" title="Clark Reyel">
<div class="emplist" style="width: 116px; height: 116px;">
<div class="emp-img" style="font-size: 13px;"><img src="http://placehold.it/300x300.jpg" alt="abc" class="img img-circle img-responsive" style="width: 120px;"></div>
<div id="" class="empDetails" style="font-size: 13px;">
<p class="text-center"> <strong>Clark Reyel</strong></p>
<p class="leafCount" style="cursor: pointer;"><span></span>
<button title="info" id="btn_empModal13" data-toggle="modal" class="btn btn-xs text-center"><i class="fa fa-info-circle OrgInfo" aria-hidden="true"></i></button>
</p>
</div>
<div !class="emp-hover" style="font-size: 13px;"></div>
</div>
</li>
</ul>
</li>
<li parent-id="1742" li-id="4524" title="Sarah Street">
<div class="emplist" style="width: 116px; height: 116px;">
<div class="emp-img" style="font-size: 13px;"><img src="http://placehold.it/300x300.jpg" alt="abc" class="img img-circle img-responsive" style="width: 120px;"></div>
<div id="" class="empDetails" style="font-size: 13px;">
<p class="text-center"> <strong>Sarah Street</strong></p>
<p class="leafCount" style="cursor: pointer;"><span><i class="fa fa-plus-circle" aria-hidden="true"></i>2</span>
<button title="info" id="btn_empModal8" data-toggle="modal" class="btn btn-xs text-center"><i class="fa fa-info-circle OrgInfo" aria-hidden="true"></i></button>
</p>
</div>
<div !class="emp-hover" style="font-size: 13px;"></div>
</div>
<ul style="display: none;">
<li parent-id="4524" li-id="1733" title="Monday Cabales">
<div class="emplist" style="width: 116px; height: 116px;">
<div class="emp-img" style="font-size: 13px;"><img src="http://placehold.it/300x300.jpg" alt="abc" class="img img-circle img-responsive" style="width: 120px;"></div>
<div id="" class="empDetails" style="font-size: 13px;">
<p class="text-center"> <strong>Monday Cabales</strong></p>
<p class="leafCount" style="cursor: pointer;"><span></span>
<button title="info" id="btn_empModal9" data-toggle="modal" class="btn btn-xs text-center"><i class="fa fa-info-circle OrgInfo" aria-hidden="true"></i></button>
</p>
</div>
<div !class="emp-hover" style="font-size: 13px;"></div>
</div>
</li>
<li parent-id="4524" li-id="1755" title="Madhumita Sahoo">
<div class="emplist" style="width: 116px; height: 116px;">
<div class="emp-img" style="font-size: 13px;"><img src="http://placehold.it/300x300.jpg" alt="abc" class="img img-circle img-responsive" style="width: 120px;"></div>
<div id="" class="empDetails" style="font-size: 13px;">
<p class="text-center"> <strong>Madhumita Sahoo</strong></p>
<p class="leafCount" style="cursor: pointer;"><span></span>
<button title="info" id="btn_empModal11" data-toggle="modal" class="btn btn-xs text-center"><i class="fa fa-info-circle OrgInfo" aria-hidden="true"></i></button>
</p>
</div>
<div !class="emp-hover" style="font-size: 13px;"></div>
</div>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
希望这适合你。