Jquery手风琴函数，修改父类

Jquery Accordion function, alter class of parent

本文关键字：修改 父类 函数 手风琴 Jquery      更新时间：2023-09-26

我有一个引导手风琴表这是工作良好。字形符号指示当前展开的是哪个表的子行。但是这个函数似乎有问题，它没有像预期的那样改变祖先元素的类。

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

您查找.indicator元素的方式不正确。它位于.accordion元素母体tr的前一tr中。只要遵循结构，你就会得到合适的元素。此外，您可以组合这两个事件并使用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 -切换[添加/删除]各自的类

这是更新演示

还要注意，我在html中做了一些更改，以匹配类

问题是你的父选择器永远不会从前一行提取单元格，你应该选择row，切换到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");
});
相关文章：