Javascript $（此）.attr（'；id'；）仅用于实际元素

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

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

$（文档）.ready（函数（）{
$（'.collapse'）.on（'show.bs.collapse'，function（））{
var id=$（this.attr（'id'）；
$（'a[href=“#”+id+”）。面板标题span'）.html（“”）；
});
$（'.collapse'）.on（'hide.bs.collapse'，function（））{
var id=$（this.attr（'id'）；
$（'a[href=“#”+id+”）。面板标题span'）.html（“”）；
});
});

---

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

您注意到的问题不是由于错误的ID引用，而是由于父元素上触发的事件。可以通过防止事件在DOM树上“冒泡”（即在目标元素的所有父元素上触发）来修复此问题

通过调用事件对象防止事件冒泡到父元素

发件人：

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

$（文档）.ready（函数（）{
$（'.collapse'）.on（'show.bs.collapse'，函数（e）{
e、 停止传播（）；
var id=$（this.attr（'id'）；
$（'a[href=“#”+id+”]。面板标题span'）
.html（“”）；
});
$（'.collapse'）.on（'hide.bs.collapse'，函数（e）{
e、 停止传播（）；
var id=$（this.attr（'id'）；
$（'a[href=“#”+id+”]。面板标题span'）
.html（“”）；
});
});

您能提供一些HTML代码吗？

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