bootstrap событие коллапса срабатывает несколько раз

Question

Я создал меню со складными элементами, в котором стрелка изменится при нажатии

• Свернуть закрыто: fa-caret-right
• Свернуть открыто: fa-caret-down

HTML

<ul class="list-unstyled">
    ....
    <li>
        <a href="#level2" data-toggle="collapse" aria-expanded="false"><i class="fa fa-caret-right"></i>&nbsp;&nbsp;Level 2</a>
        <ul class="collapse list-unstyled" id="level2" data-parent="#parent">
            <li><a href="#">Level 2.1</a></li>
            <li><a href="#">Level 2.2</a></li>
        </ul>
    </li>
    ....
</ul>

JS

$('.collapse').on('show.bs.collapse', function ()
{
    $(this).prev().find('svg').addClass('fa-caret-down').removeClass('fa-caret-right');
});     
$('.collapse').on('hide.bs.collapse', function ()
{
    $(this).prev().find('svg').addClass('fa-caret-right').removeClass('fa-caret-down');
}); 

Проблема заключается в том, что при нажатии на подпункт элемент, событие вызывается два раза, не только для текущего элемента, но и для родительского элемента.

Как вы можете видеть на изображениях, когда я закрыл уровень 2, событие также было применено к уровню 1, и значок изменился с fa-caret-down на fa-caret-right

Answer 1

Мне удалось это исправить, добавив event.stopPropagation(); в начале события.

Таким образом, событие применяется только к выбранному элементу.

$('.custom-collapse').on('show.bs.collapse', function (e)
{
    e.stopPropagation();            
    $(this).prev().find('svg').addClass('fa-caret-down').removeClass('fa-caret-right');
});

$('.custom-collapse').on('hidden.bs.collapse', function (e)
{
    e.stopPropagation();            
    $(this).prev().find('svg').addClass('fa-caret-right').removeClass('fa-caret-down');
    $(this).find('.collapse').collapse('hide');
});

Answer 2

Метод find просматривает всех потомков элемента. Таким образом, будет найден не один, а два SVG-класса и классы добавления / удаления:

$(this).prev().find('svg').addClass('fa-caret-down').removeClass('fa-caret-right');

Вы можете попробовать использовать метод first (), чтобы получить первый элемент.

$(this).prev().find('svg').first().addClass('fa-caret-down').removeClass('fa-caret-right');