我使用以下代码更改嵌套引导程序可折叠元素(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>');
});
});
如何在没有父元素的情况下仅更改当前元素的图标?
答案 0 :(得分:2)
您注意到的问题不是由于错误的ID引用,实际上也是由于在父元素上触发了事件。你可以通过阻止事件“冒泡”来解决这个问题。 DOM树(即在目标元素的所有父元素上触发)。
通过调用事件对象上的stopPropagation
来阻止事件冒泡到父元素。
阻止事件冒泡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>');
});
});