我有一个具有多个行级别的表，该表能够折叠和扩展。请参考以下 JSFiddle
当前，当单击表行时，这些行正在扩展/折叠。但是相反，我希望仅在单击人字形的最左侧时才发生这种情况。我当时在玩代码，但找不到解决方法。
<!--Table-->
<table class="table table-hover table-curriculum" id="mytable">
<!--Table head-->
<thead>
<tr class="table-head">
<th>Subject</th>
<th>Type</th>
<th>Start Date</th>
<th>End Date</th>
<th>Logged By</th>
<th>Status</th>
<th><a data-toggle="modal" data-target="#columnOption"><i class="fa fa-plus-circle" aria-hidden="true"></i></a></th>
</tr>
</thead>
<!--Table head-->
<!--Table body-->
<tbody>
<tr data-depth="0" class="collapse-table level0">
<td class="milestones" data-field="name" colspan="6"><i class="fa fa-chevron-down p-r-10" aria-hidden="true"></i><strong>English</strong></td>
<td class="dropdown"><a href="" class="dropdown-toggle" id="dropMenu1" data-toggle="dropdown"><i class="fa fa-ellipsis-h" aria-hidden="true"></i></a>
<ul class="dropdown-menu dropdown-menu-right" role="menu">
<li><a id="milestone-form" role="menuitem" href="#"><i class="fa fa-info-circle" aria-hidden="true"></i> View Details</a></li>
<li><a role="menuitem" href="#"><i class="fa fa-share-alt" aria-hidden="true"></i> Share</a></li>
<li><a role="menuitem" href="#"><i class="fa fa-trash" aria-hidden="true"></i> Delete</a></li>
<li><a role="menuitem" href="#"><i class="fa fa-files-o" aria-hidden="true"></i> Clone</a></li>
<li><a role="menuitem" class="create-child"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> Create New Child</a></li>
</ul>
</td>
</tr>
<tr data-depth="1" class="collapse-table level1">
<td class="goals" data-field="name"><i class="fa fa-chevron-down p-r-10" aria-hidden="true"></i>Language (Strands)</td>
<td data-field="type">Milestone</td>
<td data-field="date">03/08/2018</td>
<td data-field="date">17/08/2018</td>
<td data-field="logged">Assignee 1</td>
<td data-field="status"><label class="label label-warning">In Progress</label></td>
<td class="dropdown"><a href="" class="dropdown-toggle" id="dropMenu1" data-toggle="dropdown"><i class="fa fa-ellipsis-h" aria-hidden="true"></i></a>
<ul class="dropdown-menu dropdown-menu-right" role="menu">
<li><a id="goal-form" role="menuitem" href="#"><i class="fa fa-info-circle" aria-hidden="true"></i> View Details</a></li>
<li><a role="menuitem" href="#"><i class="fa fa-share-alt" aria-hidden="true"></i> Share</a></li>
<li><a role="menuitem" href="#"><i class="fa fa-trash" aria-hidden="true"></i> Delete</a></li>
<li><a role="menuitem" href="#"><i class="fa fa-files-o" aria-hidden="true"></i> Clone</a></li>
<li><a role="menuitem" class="create-child" href="#"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> Create New Child</a></li>
</ul>
</td>
</tr>
<tr data-depth="2" class="collapse-table level2">
<td class="tasks" data-field="name" ><i class="fa fa-chevron-down p-r-10" aria-hidden="true"></i>Language variation (Topics)</td>
<td data-field="type">Goal</td>
<td data-field="date">03/08/2018</td>
<td data-field="date">17/08/2018</td>
<td data-field="logged">Assignee 1</td>
<td data-field="status"><label class="label label-danger">New</label></td>
<td class="dropdown"><a href="" class="dropdown-toggle" id="dropMenu1" data-toggle="dropdown"><i class="fa fa-ellipsis-h" aria-hidden="true"></i></a>
<ul class="dropdown-menu dropdown-menu-right" role="menu">
<li><a id="action-item-form" role="menuitem" href="#"><i class="fa fa-info-circle" aria-hidden="true"></i> View Details</a></li>
<li><a role="menuitem" href="#"><i class="fa fa-share-alt" aria-hidden="true"></i> Share</a></li>
<li><a role="menuitem" href="#"><i class="fa fa-trash" aria-hidden="true"></i> Delete</a></li>
<li><a role="menuitem" href="#"><i class="fa fa-files-o" aria-hidden="true"></i> Clone</a></li>
<li><a role="menuitem" class="create-child" href="#"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> Create New Child</a></li>
</ul>
</td>
</tr>
<tr data-depth="3" class="collapse-table level3">
<td class="sub-tasks" data-field="name"><i class="fa fa-chevron-down p-r-10" aria-hidden="true"></i>CELA1443 (outcome)</td>
<td data-field="type">Action Item</td>
<td data-field="date">03/08/2018</td>
<td data-field="date">17/08/2018</td>
<td data-field="logged">Assignee 1</td>
<td data-field="status"><label class="label label-success">Completed</label></td>
<td class="dropdown"><a href="" class="dropdown-toggle" id="dropMenu1" data-toggle="dropdown"><i class="fa fa-ellipsis-h" aria-hidden="true"></i></a>
<ul class="dropdown-menu dropdown-menu-right" role="menu">
<li><a id="action-item-form" role="menuitem" href="#"><i class="fa fa-info-circle" aria-hidden="true"></i> View Details</a></li>
<li><a role="menuitem" href="#"><i class="fa fa-share-alt" aria-hidden="true"></i> Share</a></li>
<li><a role="menuitem" href="#"><i class="fa fa-trash" aria-hidden="true"></i> Delete</a></li>
<li><a role="menuitem" href="#"><i class="fa fa-files-o" aria-hidden="true"></i> Clone</a></li>
<li><a role="menuitem" class="create-child" href="#"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> Create New Child</a></li>
</ul>
</td>
</tr>
<tr data-depth="4" class="collapse-table level4">
<td class="grand-tasks" data-field="name">MCQ1</td>
<td data-field="type">Action Item</td>
<td data-field="date">03/08/2018</td>
<td data-field="date">17/08/2018</td>
<td data-field="logged">Assignee 1</td>
<td data-field="status"><label class="label label-success">Completed</label></td>
<td class="dropdown"><a href="" class="dropdown-toggle" id="dropMenu1" data-toggle="dropdown"><i class="fa fa-ellipsis-h" aria-hidden="true"></i></a>
<ul class="dropdown-menu dropdown-menu-right" role="menu">
<li><a id="action-item-form" role="menuitem" href="#"><i class="fa fa-info-circle" aria-hidden="true"></i> View Details</a></li>
<li><a role="menuitem" href="#"><i class="fa fa-share-alt" aria-hidden="true"></i> Share</a></li>
<li><a role="menuitem" href="#"><i class="fa fa-trash" aria-hidden="true"></i> Delete</a></li>
<li><a role="menuitem" href="#"><i class="fa fa-files-o" aria-hidden="true"></i> Clone</a></li>
<li><a role="menuitem" class="create-child" href="#"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> Create New Child</a></li>
</ul>
</td>
</tr>
<tr data-depth="4" class="collapse-table level4">
<td class="grand-tasks" data-field="name"><i class="fa fa-chevron-down p-r-10" aria-hidden="true"></i>Assignment 1</td>
<td data-field="type">Action Item</td>
<td data-field="date">03/08/2018</td>
<td data-field="date">17/08/2018</td>
<td data-field="logged">Assignee 1</td>
<td data-field="status"><label class="label label-success">Completed</label></td>
<td class="dropdown"><a href="" class="dropdown-toggle" id="dropMenu1" data-toggle="dropdown"><i class="fa fa-ellipsis-h" aria-hidden="true"></i></a>
<ul class="dropdown-menu dropdown-menu-right" role="menu">
<li><a id="action-item-form" role="menuitem" href="#"><i class="fa fa-info-circle" aria-hidden="true"></i> View Details</a></li>
<li><a role="menuitem" href="#"><i class="fa fa-share-alt" aria-hidden="true"></i> Share</a></li>
<li><a role="menuitem" href="#"><i class="fa fa-trash" aria-hidden="true"></i> Delete</a></li>
<li><a role="menuitem" href="#"><i class="fa fa-files-o" aria-hidden="true"></i> Clone</a></li>
<li><a role="menuitem" class="create-child" href="#"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> Create New Child</a></li>
</ul>
</td>
</tr>
<tr data-depth="5" class="collapse-table level5">
<td class="grand-sub-tasks" data-field="name">OE 1</td>
<td data-field="type">Action Item</td>
<td data-field="date">03/08/2018</td>
<td data-field="date">17/08/2018</td>
<td data-field="logged">Assignee 1</td>
<td data-field="status"><label class="label label-success">Completed</label></td>
<td class="dropdown"><a href="" class="dropdown-toggle" id="dropMenu1" data-toggle="dropdown"><i class="fa fa-ellipsis-h" aria-hidden="true"></i></a>
<ul class="dropdown-menu dropdown-menu-right" role="menu">
<li><a id="action-item-form" role="menuitem" href="#"><i class="fa fa-info-circle" aria-hidden="true"></i> View Details</a></li>
<li><a role="menuitem" href="#"><i class="fa fa-share-alt" aria-hidden="true"></i> Share</a></li>
<li><a role="menuitem" href="#"><i class="fa fa-trash" aria-hidden="true"></i> Delete</a></li>
<li><a role="menuitem" href="#"><i class="fa fa-files-o" aria-hidden="true"></i> Clone</a></li>
<li><a role="menuitem" class="create-child" href="#"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> Create New Child</a></li>
</ul>
</td>
</tr>
<tr data-depth="5" class="collapse-table level5">
<td class="grand-sub-tasks" data-field="name">OE 2</td>
<td data-field="type">Action Item</td>
<td data-field="date">03/08/2018</td>
<td data-field="date">17/08/2018</td>
<td data-field="logged">Assignee 1</td>
<td data-field="status"><label class="label label-success">Completed</label></td>
<td class="dropdown"><a href="" class="dropdown-toggle" id="dropMenu1" data-toggle="dropdown"><i class="fa fa-ellipsis-h" aria-hidden="true"></i></a>
<ul class="dropdown-menu dropdown-menu-right" role="menu">
<li><a id="action-item-form" role="menuitem" href="#"><i class="fa fa-info-circle" aria-hidden="true"></i> View Details</a></li>
<li><a role="menuitem" href="#"><i class="fa fa-share-alt" aria-hidden="true"></i> Share</a></li>
<li><a role="menuitem" href="#"><i class="fa fa-trash" aria-hidden="true"></i> Delete</a></li>
<li><a role="menuitem" href="#"><i class="fa fa-files-o" aria-hidden="true"></i> Clone</a></li>
<li><a role="menuitem" class="create-child" href="#"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> Create New Child</a></li>
</ul>
</td>
</tr>
<tr data-depth="3" class="collapse-table level3">
<td class="sub-tasks" data-field="name"><i class="fa fa-chevron-down p-r-10" aria-hidden="true"></i>CELA1453 (outcome)</td>
<td data-field="type">Action Item</td>
<td data-field="date">03/08/2018</td>
<td data-field="date">17/08/2018</td>
<td data-field="logged">Assignee 1</td>
<td data-field="status"><label class="label label-success">Completed</label></td>
<td class="dropdown"><a href="" class="dropdown-toggle" id="dropMenu1" data-toggle="dropdown"><i class="fa fa-ellipsis-h" aria-hidden="true"></i></a>
<ul class="dropdown-menu dropdown-menu-right" role="menu">
<li><a id="action-item-form" role="menuitem" href="#"><i class="fa fa-info-circle" aria-hidden="true"></i> View Details</a></li>
<li><a role="menuitem" href="#"><i class="fa fa-share-alt" aria-hidden="true"></i> Share</a></li>
<li><a role="menuitem" href="#"><i class="fa fa-trash" aria-hidden="true"></i> Delete</a></li>
<li><a role="menuitem" href="#"><i class="fa fa-files-o" aria-hidden="true"></i> Clone</a></li>
<li><a role="menuitem" class="create-child" href="#"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> Create New Child</a></li>
</ul>
</td>
</tr>
<tr data-depth="4" class="collapse-table level4">
<td class="grand-tasks" data-field="name">MCQ1</td>
<td data-field="type">Action Item</td>
<td data-field="date">03/08/2018</td>
<td data-field="date">17/08/2018</td>
<td data-field="logged">Assignee 1</td>
<td data-field="status"><label class="label label-success">Completed</label></td>
<td class="dropdown"><a href="" class="dropdown-toggle" id="dropMenu1" data-toggle="dropdown"><i class="fa fa-ellipsis-h" aria-hidden="true"></i></a>
<ul class="dropdown-menu dropdown-menu-right" role="menu">
<li><a id="action-item-form" role="menuitem" href="#"><i class="fa fa-info-circle" aria-hidden="true"></i> View Details</a></li>
<li><a role="menuitem" href="#"><i class="fa fa-share-alt" aria-hidden="true"></i> Share</a></li>
<li><a role="menuitem" href="#"><i class="fa fa-trash" aria-hidden="true"></i> Delete</a></li>
<li><a role="menuitem" href="#"><i class="fa fa-files-o" aria-hidden="true"></i> Clone</a></li>
<li><a role="menuitem" class="create-child" href="#"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> Create New Child</a></li>
</ul>
</td>
</tr>
<tr data-depth="4" class="collapse-table level4">
<td class="grand-tasks" data-field="name"><i class="fa fa-chevron-down p-r-10" aria-hidden="true"></i>Assignment 1</td>
<td data-field="type">Action Item</td>
<td data-field="date">03/08/2018</td>
<td data-field="date">17/08/2018</td>
<td data-field="logged">Assignee 1</td>
<td data-field="status"><label class="label label-success">Completed</label></td>
<td class="dropdown"><a href="" class="dropdown-toggle" id="dropMenu1" data-toggle="dropdown"><i class="fa fa-ellipsis-h" aria-hidden="true"></i></a>
<ul class="dropdown-menu dropdown-menu-right" role="menu">
<li><a id="action-item-form" role="menuitem" href="#"><i class="fa fa-info-circle" aria-hidden="true"></i> View Details</a></li>
<li><a role="menuitem" href="#"><i class="fa fa-share-alt" aria-hidden="true"></i> Share</a></li>
<li><a role="menuitem" href="#"><i class="fa fa-trash" aria-hidden="true"></i> Delete</a></li>
<li><a role="menuitem" href="#"><i class="fa fa-files-o" aria-hidden="true"></i> Clone</a></li>
<li><a role="menuitem" class="create-child" href="#"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> Create New Child</a></li>
</ul>
</td>
</tr>
<tr data-depth="5" class="collapse-table level5">
<td class="grand-sub-tasks" data-field="name">OE 3</td>
<td data-field="type">Action Item</td>
<td data-field="date">03/08/2018</td>
<td data-field="date">17/08/2018</td>
<td data-field="logged">Assignee 1</td>
<td data-field="status"><label class="label label-success">Completed</label></td>
<td class="dropdown"><a href="" class="dropdown-toggle" id="dropMenu1" data-toggle="dropdown"><i class="fa fa-ellipsis-h" aria-hidden="true"></i></a>
<ul class="dropdown-menu dropdown-menu-right" role="menu">
<li><a id="action-item-form" role="menuitem" href="#"><i class="fa fa-info-circle" aria-hidden="true"></i> View Details</a></li>
<li><a role="menuitem" href="#"><i class="fa fa-share-alt" aria-hidden="true"></i> Share</a></li>
<li><a role="menuitem" href="#"><i class="fa fa-trash" aria-hidden="true"></i> Delete</a></li>
<li><a role="menuitem" href="#"><i class="fa fa-files-o" aria-hidden="true"></i> Clone</a></li>
<li><a role="menuitem" class="create-child" href="#"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> Create New Child</a></li>
</ul>
</td>
</tr>
<tr data-depth="5" class="collapse-table level5">
<td class="grand-sub-tasks" data-field="name">OE 4</td>
<td data-field="type">Action Item</td>
<td data-field="date">03/08/2018</td>
<td data-field="date">17/08/2018</td>
<td data-field="logged">Assignee 1</td>
<td data-field="status"><label class="label label-success">Completed</label></td>
<td class="dropdown"><a href="" class="dropdown-toggle" id="dropMenu1" data-toggle="dropdown"><i class="fa fa-ellipsis-h" aria-hidden="true"></i></a>
<ul class="dropdown-menu dropdown-menu-right" role="menu">
<li><a id="action-item-form" role="menuitem" href="#"><i class="fa fa-info-circle" aria-hidden="true"></i> View Details</a></li>
<li><a role="menuitem" href="#"><i class="fa fa-share-alt" aria-hidden="true"></i> Share</a></li>
<li><a role="menuitem" href="#"><i class="fa fa-trash" aria-hidden="true"></i> Delete</a></li>
<li><a role="menuitem" href="#"><i class="fa fa-files-o" aria-hidden="true"></i> Clone</a></li>
<li><a role="menuitem" class="create-child" href="#"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> Create New Child</a></li>
</ul>
</td>
</tr>
</tbody>
<!--Table body-->
</table>
<!--Table-->
JS
$('.collapse-table').on('click', function() {
//console.log($(this).attr('data-depth'));
var findChildren = function(tr) {
var depth = tr.data('depth');
return tr.nextUntil($('tr').filter(function() {
return $(this).data('depth') <= depth;
}));
};
var children = findChildren($(this));
if ($(children).is(':visible')) {
$(this).addClass("closed");
$(children).hide();
} else {
$(this).removeClass("closed");
$(children).show();
var children = findChildren($(".closed"));
$(children).hide();
}
});
答案 0 :(得分：3)
您需要将侦听器附加到人字形图标，然后使用findChildren传递给其父项的closest("tr")函数。 （documentation）
在下面的代码段代码下进行测试以显示然后运行，这有帮助吗？
$(".fa-chevron-down").on("click", function(){
let _thisJq = $(this);
let parent = $(this).closest("tr");
let children = $(findChildren(parent));
if (children.is(':visible')) {
_thisJq.addClass("closed");
_thisJq.removeClass("fa-chevron-down");
_thisJq.addClass("fa-chevron-up");
children.hide();
} else {
_thisJq.removeClass("closed");
_thisJq.removeClass("fa-chevron-up");
_thisJq.addClass("fa-chevron-down");
children.show();
let childrenB = findChildren($(".closed"));
$(childrenB).hide();
}
});
var findChildren = function(tr) {
var depth = tr.data('depth');
return tr.nextUntil($('tr').filter(function() {
return $(this).data('depth') <= depth;
}));
};.milestones {
padding-left: 15px !important;
}
.goals {
padding-left: 35px !important;
}
.tasks {
padding-left: 55px !important;
}
.sub-tasks {
padding-left: 75px !important;
}
.grand-tasks {
padding-left: 95px !important;
}
.grand-sub-tasks {
padding-left: 115px !important;
}
tbody tr td:first-child i {
padding-right: 10px;
}
.fa-chevron-up, .fa-chevron-down{
cursor: pointer;
}<script src="http://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>
<!--Table-->
<table class="table table-hover table-curriculum" id="mytable">
<!--Table head-->
<thead>
<tr class="table-head">
<th>Subject</th>
<th>Type</th>
<th>Start Date</th>
<th>End Date</th>
<th>Logged By</th>
<th>Status</th>
<th><a data-toggle="modal" data-target="#columnOption"><i class="fa fa-plus-circle" aria-hidden="true"></i></a></th>
</tr>
</thead>
<!--Table head-->
<!--Table body-->
<tbody>
<tr data-depth="0" class="collapse-table level0">
<td class="milestones" data-field="name" colspan="6"><i class="fa fa-chevron-down p-r-10" aria-hidden="true"></i><strong>English</strong></td>
<td class="dropdown"><a href="" class="dropdown-toggle" id="dropMenu1" data-toggle="dropdown"><i class="fa fa-ellipsis-h" aria-hidden="true"></i></a>
<ul class="dropdown-menu dropdown-menu-right" role="menu">
<li><a id="milestone-form" role="menuitem" href="#"><i class="fa fa-info-circle" aria-hidden="true"></i> View Details</a></li>
<li><a role="menuitem" href="#"><i class="fa fa-share-alt" aria-hidden="true"></i> Share</a></li>
<li><a role="menuitem" href="#"><i class="fa fa-trash" aria-hidden="true"></i> Delete</a></li>
<li><a role="menuitem" href="#"><i class="fa fa-files-o" aria-hidden="true"></i> Clone</a></li>
<li><a role="menuitem" class="create-child"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> Create New Child</a></li>
</ul>
</td>
</tr>
<tr data-depth="1" class="collapse-table level1">
<td class="goals" data-field="name"><i class="fa fa-chevron-down p-r-10" aria-hidden="true"></i>Language (Strands)</td>
<td data-field="type">Milestone</td>
<td data-field="date">03/08/2018</td>
<td data-field="date">17/08/2018</td>
<td data-field="logged">Assignee 1</td>
<td data-field="status"><label class="label label-warning">In Progress</label></td>
<td class="dropdown"><a href="" class="dropdown-toggle" id="dropMenu1" data-toggle="dropdown"><i class="fa fa-ellipsis-h" aria-hidden="true"></i></a>
<ul class="dropdown-menu dropdown-menu-right" role="menu">
<li><a id="goal-form" role="menuitem" href="#"><i class="fa fa-info-circle" aria-hidden="true"></i> View Details</a></li>
<li><a role="menuitem" href="#"><i class="fa fa-share-alt" aria-hidden="true"></i> Share</a></li>
<li><a role="menuitem" href="#"><i class="fa fa-trash" aria-hidden="true"></i> Delete</a></li>
<li><a role="menuitem" href="#"><i class="fa fa-files-o" aria-hidden="true"></i> Clone</a></li>
<li><a role="menuitem" class="create-child" href="#"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> Create New Child</a></li>
</ul>
</td>
</tr>
<tr data-depth="2" class="collapse-table level2">
<td class="tasks" data-field="name" ><i class="fa fa-chevron-down p-r-10" aria-hidden="true"></i>Language variation (Topics)</td>
<td data-field="type">Goal</td>
<td data-field="date">03/08/2018</td>
<td data-field="date">17/08/2018</td>
<td data-field="logged">Assignee 1</td>
<td data-field="status"><label class="label label-danger">New</label></td>
<td class="dropdown"><a href="" class="dropdown-toggle" id="dropMenu1" data-toggle="dropdown"><i class="fa fa-ellipsis-h" aria-hidden="true"></i></a>
<ul class="dropdown-menu dropdown-menu-right" role="menu">
<li><a id="action-item-form" role="menuitem" href="#"><i class="fa fa-info-circle" aria-hidden="true"></i> View Details</a></li>
<li><a role="menuitem" href="#"><i class="fa fa-share-alt" aria-hidden="true"></i> Share</a></li>
<li><a role="menuitem" href="#"><i class="fa fa-trash" aria-hidden="true"></i> Delete</a></li>
<li><a role="menuitem" href="#"><i class="fa fa-files-o" aria-hidden="true"></i> Clone</a></li>
<li><a role="menuitem" class="create-child" href="#"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> Create New Child</a></li>
</ul>
</td>
</tr>
<tr data-depth="3" class="collapse-table level3">
<td class="sub-tasks" data-field="name"><i class="fa fa-chevron-down p-r-10" aria-hidden="true"></i>CELA1443 (outcome)</td>
<td data-field="type">Action Item</td>
<td data-field="date">03/08/2018</td>
<td data-field="date">17/08/2018</td>
<td data-field="logged">Assignee 1</td>
<td data-field="status"><label class="label label-success">Completed</label></td>
<td class="dropdown"><a href="" class="dropdown-toggle" id="dropMenu1" data-toggle="dropdown"><i class="fa fa-ellipsis-h" aria-hidden="true"></i></a>
<ul class="dropdown-menu dropdown-menu-right" role="menu">
<li><a id="action-item-form" role="menuitem" href="#"><i class="fa fa-info-circle" aria-hidden="true"></i> View Details</a></li>
<li><a role="menuitem" href="#"><i class="fa fa-share-alt" aria-hidden="true"></i> Share</a></li>
<li><a role="menuitem" href="#"><i class="fa fa-trash" aria-hidden="true"></i> Delete</a></li>
<li><a role="menuitem" href="#"><i class="fa fa-files-o" aria-hidden="true"></i> Clone</a></li>
<li><a role="menuitem" class="create-child" href="#"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> Create New Child</a></li>
</ul>
</td>
</tr>
<tr data-depth="4" class="collapse-table level4">
<td class="grand-tasks" data-field="name">MCQ1</td>
<td data-field="type">Action Item</td>
<td data-field="date">03/08/2018</td>
<td data-field="date">17/08/2018</td>
<td data-field="logged">Assignee 1</td>
<td data-field="status"><label class="label label-success">Completed</label></td>
<td class="dropdown"><a href="" class="dropdown-toggle" id="dropMenu1" data-toggle="dropdown"><i class="fa fa-ellipsis-h" aria-hidden="true"></i></a>
<ul class="dropdown-menu dropdown-menu-right" role="menu">
<li><a id="action-item-form" role="menuitem" href="#"><i class="fa fa-info-circle" aria-hidden="true"></i> View Details</a></li>
<li><a role="menuitem" href="#"><i class="fa fa-share-alt" aria-hidden="true"></i> Share</a></li>
<li><a role="menuitem" href="#"><i class="fa fa-trash" aria-hidden="true"></i> Delete</a></li>
<li><a role="menuitem" href="#"><i class="fa fa-files-o" aria-hidden="true"></i> Clone</a></li>
<li><a role="menuitem" class="create-child" href="#"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> Create New Child</a></li>
</ul>
</td>
</tr>
<tr data-depth="4" class="collapse-table level4">
<td class="grand-tasks" data-field="name"><i class="fa fa-chevron-down p-r-10" aria-hidden="true"></i>Assignment 1</td>
<td data-field="type">Action Item</td>
<td data-field="date">03/08/2018</td>
<td data-field="date">17/08/2018</td>
<td data-field="logged">Assignee 1</td>
<td data-field="status"><label class="label label-success">Completed</label></td>
<td class="dropdown"><a href="" class="dropdown-toggle" id="dropMenu1" data-toggle="dropdown"><i class="fa fa-ellipsis-h" aria-hidden="true"></i></a>
<ul class="dropdown-menu dropdown-menu-right" role="menu">
<li><a id="action-item-form" role="menuitem" href="#"><i class="fa fa-info-circle" aria-hidden="true"></i> View Details</a></li>
<li><a role="menuitem" href="#"><i class="fa fa-share-alt" aria-hidden="true"></i> Share</a></li>
<li><a role="menuitem" href="#"><i class="fa fa-trash" aria-hidden="true"></i> Delete</a></li>
<li><a role="menuitem" href="#"><i class="fa fa-files-o" aria-hidden="true"></i> Clone</a></li>
<li><a role="menuitem" class="create-child" href="#"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> Create New Child</a></li>
</ul>
</td>
</tr>
<tr data-depth="5" class="collapse-table level5">
<td class="grand-sub-tasks" data-field="name">OE 1</td>
<td data-field="type">Action Item</td>
<td data-field="date">03/08/2018</td>
<td data-field="date">17/08/2018</td>
<td data-field="logged">Assignee 1</td>
<td data-field="status"><label class="label label-success">Completed</label></td>
<td class="dropdown"><a href="" class="dropdown-toggle" id="dropMenu1" data-toggle="dropdown"><i class="fa fa-ellipsis-h" aria-hidden="true"></i></a>
<ul class="dropdown-menu dropdown-menu-right" role="menu">
<li><a id="action-item-form" role="menuitem" href="#"><i class="fa fa-info-circle" aria-hidden="true"></i> View Details</a></li>
<li><a role="menuitem" href="#"><i class="fa fa-share-alt" aria-hidden="true"></i> Share</a></li>
<li><a role="menuitem" href="#"><i class="fa fa-trash" aria-hidden="true"></i> Delete</a></li>
<li><a role="menuitem" href="#"><i class="fa fa-files-o" aria-hidden="true"></i> Clone</a></li>
<li><a role="menuitem" class="create-child" href="#"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> Create New Child</a></li>
</ul>
</td>
</tr>
<tr data-depth="5" class="collapse-table level5">
<td class="grand-sub-tasks" data-field="name">OE 2</td>
<td data-field="type">Action Item</td>
<td data-field="date">03/08/2018</td>
<td data-field="date">17/08/2018</td>
<td data-field="logged">Assignee 1</td>
<td data-field="status"><label class="label label-success">Completed</label></td>
<td class="dropdown"><a href="" class="dropdown-toggle" id="dropMenu1" data-toggle="dropdown"><i class="fa fa-ellipsis-h" aria-hidden="true"></i></a>
<ul class="dropdown-menu dropdown-menu-right" role="menu">
<li><a id="action-item-form" role="menuitem" href="#"><i class="fa fa-info-circle" aria-hidden="true"></i> View Details</a></li>
<li><a role="menuitem" href="#"><i class="fa fa-share-alt" aria-hidden="true"></i> Share</a></li>
<li><a role="menuitem" href="#"><i class="fa fa-trash" aria-hidden="true"></i> Delete</a></li>
<li><a role="menuitem" href="#"><i class="fa fa-files-o" aria-hidden="true"></i> Clone</a></li>
<li><a role="menuitem" class="create-child" href="#"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> Create New Child</a></li>
</ul>
</td>
</tr>
<tr data-depth="3" class="collapse-table level3">
<td class="sub-tasks" data-field="name"><i class="fa fa-chevron-down p-r-10" aria-hidden="true"></i>CELA1453 (outcome)</td>
<td data-field="type">Action Item</td>
<td data-field="date">03/08/2018</td>
<td data-field="date">17/08/2018</td>
<td data-field="logged">Assignee 1</td>
<td data-field="status"><label class="label label-success">Completed</label></td>
<td class="dropdown"><a href="" class="dropdown-toggle" id="dropMenu1" data-toggle="dropdown"><i class="fa fa-ellipsis-h" aria-hidden="true"></i></a>
<ul class="dropdown-menu dropdown-menu-right" role="menu">
<li><a id="action-item-form" role="menuitem" href="#"><i class="fa fa-info-circle" aria-hidden="true"></i> View Details</a></li>
<li><a role="menuitem" href="#"><i class="fa fa-share-alt" aria-hidden="true"></i> Share</a></li>
<li><a role="menuitem" href="#"><i class="fa fa-trash" aria-hidden="true"></i> Delete</a></li>
<li><a role="menuitem" href="#"><i class="fa fa-files-o" aria-hidden="true"></i> Clone</a></li>
<li><a role="menuitem" class="create-child" href="#"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> Create New Child</a></li>
</ul>
</td>
</tr>
<tr data-depth="4" class="collapse-table level4">
<td class="grand-tasks" data-field="name">MCQ1</td>
<td data-field="type">Action Item</td>
<td data-field="date">03/08/2018</td>
<td data-field="date">17/08/2018</td>
<td data-field="logged">Assignee 1</td>
<td data-field="status"><label class="label label-success">Completed</label></td>
<td class="dropdown"><a href="" class="dropdown-toggle" id="dropMenu1" data-toggle="dropdown"><i class="fa fa-ellipsis-h" aria-hidden="true"></i></a>
<ul class="dropdown-menu dropdown-menu-right" role="menu">
<li><a id="action-item-form" role="menuitem" href="#"><i class="fa fa-info-circle" aria-hidden="true"></i> View Details</a></li>
<li><a role="menuitem" href="#"><i class="fa fa-share-alt" aria-hidden="true"></i> Share</a></li>
<li><a role="menuitem" href="#"><i class="fa fa-trash" aria-hidden="true"></i> Delete</a></li>
<li><a role="menuitem" href="#"><i class="fa fa-files-o" aria-hidden="true"></i> Clone</a></li>
<li><a role="menuitem" class="create-child" href="#"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> Create New Child</a></li>
</ul>
</td>
</tr>
<tr data-depth="4" class="collapse-table level4">
<td class="grand-tasks" data-field="name"><i class="fa fa-chevron-down p-r-10" aria-hidden="true"></i>Assignment 1</td>
<td data-field="type">Action Item</td>
<td data-field="date">03/08/2018</td>
<td data-field="date">17/08/2018</td>
<td data-field="logged">Assignee 1</td>
<td data-field="status"><label class="label label-success">Completed</label></td>
<td class="dropdown"><a href="" class="dropdown-toggle" id="dropMenu1" data-toggle="dropdown"><i class="fa fa-ellipsis-h" aria-hidden="true"></i></a>
<ul class="dropdown-menu dropdown-menu-right" role="menu">
<li><a id="action-item-form" role="menuitem" href="#"><i class="fa fa-info-circle" aria-hidden="true"></i> View Details</a></li>
<li><a role="menuitem" href="#"><i class="fa fa-share-alt" aria-hidden="true"></i> Share</a></li>
<li><a role="menuitem" href="#"><i class="fa fa-trash" aria-hidden="true"></i> Delete</a></li>
<li><a role="menuitem" href="#"><i class="fa fa-files-o" aria-hidden="true"></i> Clone</a></li>
<li><a role="menuitem" class="create-child" href="#"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> Create New Child</a></li>
</ul>
</td>
</tr>
<tr data-depth="5" class="collapse-table level5">
<td class="grand-sub-tasks" data-field="name">OE 3</td>
<td data-field="type">Action Item</td>
<td data-field="date">03/08/2018</td>
<td data-field="date">17/08/2018</td>
<td data-field="logged">Assignee 1</td>
<td data-field="status"><label class="label label-success">Completed</label></td>
<td class="dropdown"><a href="" class="dropdown-toggle" id="dropMenu1" data-toggle="dropdown"><i class="fa fa-ellipsis-h" aria-hidden="true"></i></a>
<ul class="dropdown-menu dropdown-menu-right" role="menu">
<li><a id="action-item-form" role="menuitem" href="#"><i class="fa fa-info-circle" aria-hidden="true"></i> View Details</a></li>
<li><a role="menuitem" href="#"><i class="fa fa-share-alt" aria-hidden="true"></i> Share</a></li>
<li><a role="menuitem" href="#"><i class="fa fa-trash" aria-hidden="true"></i> Delete</a></li>
<li><a role="menuitem" href="#"><i class="fa fa-files-o" aria-hidden="true"></i> Clone</a></li>
<li><a role="menuitem" class="create-child" href="#"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> Create New Child</a></li>
</ul>
</td>
</tr>
<tr data-depth="5" class="collapse-table level5">
<td class="grand-sub-tasks" data-field="name">OE 4</td>
<td data-field="type">Action Item</td>
<td data-field="date">03/08/2018</td>
<td data-field="date">17/08/2018</td>
<td data-field="logged">Assignee 1</td>
<td data-field="status"><label class="label label-success">Completed</label></td>
<td class="dropdown"><a href="" class="dropdown-toggle" id="dropMenu1" data-toggle="dropdown"><i class="fa fa-ellipsis-h" aria-hidden="true"></i></a>
<ul class="dropdown-menu dropdown-menu-right" role="menu">
<li><a id="action-item-form" role="menuitem" href="#"><i class="fa fa-info-circle" aria-hidden="true"></i> View Details</a></li>
<li><a role="menuitem" href="#"><i class="fa fa-share-alt" aria-hidden="true"></i> Share</a></li>
<li><a role="menuitem" href="#"><i class="fa fa-trash" aria-hidden="true"></i> Delete</a></li>
<li><a role="menuitem" href="#"><i class="fa fa-files-o" aria-hidden="true"></i> Clone</a></li>
<li><a role="menuitem" class="create-child" href="#"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> Create New Child</a></li>
</ul>
</td>
</tr>
</tbody>
<!--Table body-->
</table>
<!--Table-->
<ul class="dropdown-menu" id="contextMenu" role="menu" style="display:none">
<li><a id="milestone-form" role="menuitem" href="#"><i class="fa fa-info-circle" aria-hidden="true"></i> View Details</a></li>
<li><a role="menuitem" href="#"><i class="fa fa-share-alt" aria-hidden="true"></i> Share</a></li>
<li><a role="menuitem" href="#"><i class="fa fa-trash" aria-hidden="true"></i> Delete</a></li>
<li><a role="menuitem" href="#"><i class="fa fa-files-o" aria-hidden="true"></i> Clone</a></li>
<li><a role="menuitem" class="create-child"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> Create New Child</a></li>
</ul>
答案 1 :(得分：2)
只需进行一些小的编辑即可将折叠功能绑定到人字形本身，然后从人字形中找到最近的tr行并将其折叠。
http://jsfiddle.net/s81j70n3/21/
$(".fa-chevron-down").on('click', function() {
//console.log($(this).attr('data-depth'));
var tr = $(this).closest('tr');
var tbl = $(this).closest('.collapse-table');
var findChildren = function(tr) {
var depth = tr.data('depth');
return tr.nextUntil($('tr').filter(function() {
return $(this).data('depth') <= depth;
}));
};
var children = findChildren(tr);
if ($(children).is(':visible')) {
$(this).addClass("closed");
$(children).hide();
} else {
$(this).removeClass("closed");
$(children).show();
var children = findChildren($(".closed"));
$(children).hide();
}
});