的 Here is the Updated DEMO

Question

我有一个bootstrap手风琴表，工作正常。 glyphicon指示当前扩展了哪些tablerows children-row。但是函数的某些东西似乎是错误的，它不会像预期的那样改变祖先元素的类。

$('.accordion-text').on('shown.bs.collapse', function () {
$(this).closest(".indicator").removeClass("glyphicon-chevron-up").addClass("glyphicon-chevron-down");
});

$('.accordion-text').on('hidden.bs.collapse', function () {
$(this).closest(".indicator").removeClass("glyphicon-chevron-down").addClass("glyphicon-chevron-up");
});

完整代码：http://jsfiddle.net/7pwg1j5f/616/

<tbody>
        <tr id="package1" class="accordion-toggle" data-toggle="collapse" data-parent="#OrderPackages" data-target=".packageDetails1">
            <td>123456</td>
            <td>3</td>
            <td><i class="indicator glyphicon glyphicon-chevron-up pull-right"></i>

            </td>
        </tr>
        <tr>
            <td colspan="3" class="hiddenRow">
                <div class="accordion-text accordion-body collapse packageDetails1" id="">
                    <table>
                        <tr>
                            <td>Revealed item 1</td>
                        </tr>
                        <tr>
                            <td>Revealed item 2</td>
                        </tr>
                    </table>
                </div>
            </td>
        </tr>

Answer 1

您找到.indicator元素的方式不合适。它位于tr个.accordion元素父tr的{{1}}之前。只需按照结构，您将获得适当的元素。此外，您可以合并这两个事件，并使用toggleClass代替addClass和removeClass。以下是更新的解决方案。

$('.accordion1').on('shown.bs.collapse hidden.bs.collapse', function () {
    $(this).closest('tr').prev(".accordion-toggle").find('.indicator').toggleClass("glyphicon-chevron-up glyphicon-chevron-down");
});

.closest('tr') - 获取.accordion1 div的父级。

.prev('.accordion-toggle') - 获取之前的兄弟姐妹   早先获得parent。

.find('.indicator') - 找到.indicator元素。

.toggleClass - 切换[添加/删除]各自的课程。

<强>

的 Here is the Updated DEMO

另请注意，我已在html中进行了一些更改以匹配课程

Answer 2

问题是你的父母选择器永远不会从前一行拾取单元格，你应该选择行，切换到previous，然后找到该行下的相关元素：

$('.accordion1').on('show.bs.collapse', function () {
  $(this).parentsUntil("tbody").prev().find(".indicator").removeClass("glyphicon-chevron-up").addClass("glyphicon-chevron-down");
});
$('.accordion1').on('hide.bs.collapse', function () {
  $(this).parentsUntil("tbody").prev().find(".indicator").removeClass("glyphicon-chevron-down").addClass("glyphicon-chevron-up");
});

Jquery Accordion函数，改变父类

2 个答案:

的 Here is the Updated DEMO