Question

这是我的JSfiddle与表环境：http://jsfiddle.net/pY66Q/

我无法理解如何以这样的方式编写JavaScript：当单击具有给定类名“pmap-program-name-label”的元素时，单击处理程序运行只会使用slideToggle的表达式包含被点击的第二个孩子。我希望这是有道理的。

我的HTML：

<table class="pmap-font-clr-drk-grey">
<thead>
    <tr>
        <th>Audit Program Results</th>
        <th>Open</th>
        <th>Closed</th>
        <th>Overdue</th>
        <th>Total</th>
    </tr>
</thead>
<tbody>
    <tr class="pmap-parent-row-odd">
        <td class="pmap-program-name-label"><div class="fa fa-plus-circle fa-lg"></div><span>2011 EH&amp;S Audits - USF Sites</span></td>
        <td><a href="#">1</a></td>
        <td><a href="#">1</a></td>
        <td><a href="#">1</a></td>
        <td><a href="#">1</a></td>
    </tr>
    <tr>
        <td>2011 EH&amp;S Audits - USF Sites</td>
        <td><a href="#">1</a></td>
        <td><a href="#">1</a></td>
        <td><a href="#">1</a></td>
        <td><a href="#">1</a></td>
    </tr>
</tbody>
<tbody>
    <tr class="pmap-parent-row-even">
        <td class="pmap-program-name-label"><div class="fa fa-plus-circle fa-lg"></div><span>2011 EH&amp;S Audits - USF Sites</span></td>
        <td><a href="#">1</a></td>
        <td><a href="#">1</a></td>
        <td><a href="#">1</a></td>
        <td><a href="#">1</a></td>
    </tr>
    <tr>
        <td>2011 EH&amp;S Audits - USF Sites</td>
        <td><a href="#">1</a></td>
        <td><a href="#">1</a></td>
        <td><a href="#">1</a></td>
        <td><a href="#">1</a></td>
    </tr>
</tbody>
<tfoot>

</tfoot>

我的CSS：

table {
width: 100%;
border: 1px #eaeaea solid;
}

th {
width: 10%;
text-align: center;
border-bottom: 4px #007290 solid;
padding: 5px 0;
}

th:first-child {
width: 60%;
text-align: left;
border-bottom: 4px #007290 solid;
padding: 5px 0 5px 20px;
font-family: 'Segoe UI Bold' sans-serif;
font-weight: normal;
}

tr:nth-child(2) {
display: none;
}

td {
width: 10%;
text-align: center;
border-bottom: 1px #eaeaea solid;
border-left: 1px #eaeaea solid;
padding: 0;
line-height: 30px;
}

td:first-child {
width: 60%;
text-align: left;
border-bottom: 1px #eaeaea solid;
padding-left: 38px;
}

td.pmap-program-name-label {
width: 60%;
text-align: left;
border-bottom: 1px #eaeaea solid;
padding: 2px 0 0 10px;
color: #007290;
font-weight: bold;
cursor: pointer;
}

td.pmap-program-name-label span {
padding-left: 10px;
}

tr.pmap-parent-row-odd {
background-color:#FFFFFF;
}

tr.pmap-parent-row-even {
background-color: #F3F4F5;
}

td a {
text-decoration: none;
color: #007290;
font-weight: bold;
}

我的JavaScript / jQuery：

$(document).ready(function () {

/*
 ================================================
 Toggles Form Parent/Children Data Fields
 ================================================
 */

var sectionAnimating = false;

$('.pmap-program-name-label').click(function () {
    if (sectionAnimating == false) {
        $("tbody").find('tr:nth-child(2)').slideToggle(450, function () {
            sectionAnimating = false;
        });
        sectionAnimating = true;
    }
});

});

Answer 1

这里你有代码

(document).ready(function () {

    /*
     ================================================
     Toggles Form Parent/Children Data Fields
     ================================================
     */

    var sectionAnimating = false;

    $('.pmap-program-name-label').click(function () {
        if (sectionAnimating == false) {
            console.log(this.parentNode.parentNode)
            $(this.parentNode.parentNode).find('tr:nth-child(2)').slideToggle(450, function () {
                sectionAnimating = false;
            });
            sectionAnimating = true;
        }
    });

});

具有隐藏/显示功能的动态表

1 个答案: