JQuery用Font Awesome圖標展開摺疊

-1

展開和摺疊工作正常，但當列表展開時，我想將字體超棒的'+'改爲' - '，反之亦然。 DEMOJQuery用Font Awesome圖標展開摺疊

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(); 
});

來源

2017-07-17 nani0077

您可以使用toggleClass()到i元素添加和刪除fa-minus-circle類：

$('#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>

來源

2017-07-17 09:07:04 Ionut

謝謝你，但是一旦檢查https://jsfiddle.net/nelsonfeel/u5q9vxLc/9/ – nani0077

觀察在第三級展開最後兩個節點 – nani0077

@ nani0077，它似乎在第三級也能正常工作。我打開了第三級封閉的第二級，並再次打開第二級。顯示「+」圖標。 – Ionut

您可以使用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); 
});

來源

2017-07-17 09:07:19

它正在工作，但當我們展開另一個前一個顯示' - '只在最後節點觀察 – nani0077

展開'Simon'，然後再次展開'Rima'現在直接將'Simaon'摺疊並展開。現在觀察圖標 – nani0077

您的問題與切換圖標有關，哪些圖標正常工作，但是這是另一個與您的費用/摺疊代碼有關的問題 –

這裏是更新的版本。我也改變了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>

希望這對你的作品。

來源

2017-07-17 09:13:28 Aslam

展開'Simon'，然後再次展開'Rima'現在直接摺疊'Simaon'並展開他。現在觀察圖標 – nani0077

JQuery用Font Awesome圖標展開摺疊

回答

相關問題