Question

我使用以下代码更改嵌套引导程序可折叠元素（accordion）中的图标。但是当我点击嵌套元素时 - 例如第三级 - 第二个和第一个父元素的图标也将被更改。我只希望我的点击操作影响它直接调用的元素。

$(document).ready(function() {
    $('.collapse').on('show.bs.collapse', function() {
        var id = $(this).attr('id');
        $('a[href="#' + id + '"] .panel-title span').html('<i class="glyphicon glyphicon-chevron-down"></i>');
    });
    $('.collapse').on('hide.bs.collapse', function() {
        var id = $(this).attr('id');
        $('a[href="#' + id + '"] .panel-title span').html('<i class="glyphicon glyphicon-chevron-right"></i>');
    });
});

如何在没有父元素的情况下仅更改当前元素的图标？

Answer 1

您注意到的问题不是由于错误的ID引用，实际上也是由于在父元素上触发了事件。你可以通过阻止事件“冒泡”来解决这个问题。 DOM树（即在目标元素的所有父元素上触发）。

通过调用事件对象上的stopPropagation来阻止事件冒泡到父元素。

来自the jQuery docs：

阻止事件冒泡DOM树，防止任何父处理程序收到事件通知。

$(document).ready(function() {
    $('.collapse').on('show.bs.collapse', function(e) {
        e.stopPropagation();
        var id = $(this).attr('id');
        $('a[href="#' + id + '"] .panel-title span')
            .html('<i class="glyphicon glyphicon-chevron-down"></i>');
    });
    $('.collapse').on('hide.bs.collapse', function(e) {
        e.stopPropagation();
        var id = $(this).attr('id');
        $('a[href="#' + id + '"] .panel-title span')
            .html('<i class="glyphicon glyphicon-chevron-right"></i>');
    });
});

$（this）.attr（'id'）仅适用于实际元素

1 个答案: