[ javascript ] 리스트 클릭시 화살표 위/아래 표시

<div data-toggle="collapse" data-target="#item_1"></div>
<div id="item_1" class="collapse"> ... </div>

 

주석 처리 소스는 innerHTML 로 생성된 코드에서는 작동 안함 

 

/* 리스트 화살표 */
// Collapse로 화면이 펼치기 전에 호출 
// $('.collapse').on('show.bs.collapse', function () {
//     let target = document.querySelector('.arrow');
//     $(target).removeClass('arrow_up');
//     $(target).addClass("arrow_down");
// });
// $('.collapse').on('hide.bs.collapse', function () {
//     let target = document.querySelector('.arrow');
//     $(target).removeClass('arrow_down');
//     $(target).addClass("arrow_up");
// });

// 예: 문서 전체에서 .collapse 이벤트를 감지
$(document).on('show.bs.collapse', '.collapse', function () {
    const collapseId = this.id; // 예: item_3
    const index = collapseId.split('_')[1]; // 숫자만 추출
    const icon = document.getElementById('chkicon_' + index);
    if (icon) {
        icon.classList.remove('div-list-chkicon-up');
        icon.classList.add('div-list-chkicon-down');
    }
});
$(document).on('hide.bs.collapse', '.collapse', function () {
    const collapseId = this.id;
    const index = collapseId.split('_')[1];
    const icon = document.getElementById('chkicon_' + index);
    if (icon) {
        icon.classList.remove('div-list-chkicon-down');
        icon.classList.add('div-list-chkicon-up');
    }
});