堆棧內存溢出
  簡體   English   中英

jQuery在Chevron單擊時折疊並展開表行

[英]jQuery collapse and expand table rows on click chevron

 原文  2018-08-30 12:45:25  0   2    javascript/ jquery/ html

問題描述

我有一個具有多層行的表，它可以折疊和展開。 請參考以下JSFiddle

當前，單擊表行時，行正在擴展/折疊。 但是相反，我希望僅在單擊人字形的最左側時才發生這種情況。 我當時在玩代碼，但是找不到解決方法。

JS小提琴 

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

});

2 個解決方案

解決方案1
 3 已采納  2018-08-30 13:07:34

您需要將偵聽器附加到人字形圖標，然后使用closest("tr")傳遞給findChildren父級功能。 （ 文件 ）

在下面的代碼段代碼下進行測試，以顯示即可運行，這有幫助嗎？ 

 $(".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 pr-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 pr-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 pr-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 pr-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 pr-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 pr-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 pr-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>

解決方案2
 2  2018-08-30 13:03:11

只需進行一些小的編輯即可將折疊功能綁定到人字形本身，然后從人字形中找到最近的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();
                }

              });

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 jQuery在單擊span時展開折疊表的下一行 折疊/展開表格列（非行） Javascript-展開/折疊表格行 jQuery 表格行展開/折疊 物料表嵌套行在 reactjs 中展開/折疊 如何編寫jQuery來擴展/折疊行？ 展開和折疊 html 表中的 3 級分層行 展開和折疊 HTML 表數據行 jQuery展開/折疊分層表行 使用嵌套表展開/折疊全部 - jQuery 數據表
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM