아코디언 패널이 열리지 않을 때를 가리키는 캐럿

Question

패널이 열렸을 때 내 아코디언을 가리키는 작은 캐럿을 갖고 싶지만 내 jquery에 문제가 있습니다. 내가하는 일을 이해하지 못한다.

$('#accordion .panel-heading').click(function() { 
    $('.panel-heading').removeClass('active'); 
    $(this).addClass('active'); 
    $('.panel-heading .active').find('b').addClass('opened').removeClass('closed'); 
    $('.panel-heading').not('active').find('b').addClass('closed').removeClass('opened'); 
}); 

어떤 도움이 필요합니까? Code right here.

Answer 1

네 - 당신이하고있는 것에 몇 가지 문제가있었습니다. 선택 자 .not ('active')이 활성 클래스를 찾지 못했습니다. 그러나 중요한 문제는 사용자가 이미 활성화 된 아코디언을 클릭하면 처리하지 못했다는 것입니다.

다음은 현재 패널이 활성 상태인지 확인합니다. 논리가 쉽지 않다면 활성 상태로 만들고 모두 열어 두었다가 열어 놓으십시오.

활성 패널을 클릭 한 경우 열린 패널이 열려 있는지 확인하고, 패널을 열지 않은 경우 패널이 열리지 않았는지 확인하십시오.

$('#accordion .panel-heading').click(function() { 
    if (!$(this).hasClass('active')) 
    { 
     // the element clicked was not active, but now is - 
     $('.panel-heading').removeClass('active'); 
     $(this).addClass('active'); 
     setIconOpened(this); 
    } 
    else 
    {  
     // active panel was reclicked 
     if ($(this).find('b').hasClass('opened')) 
     { 
     setIconOpened(null); 
     } 
     else 
     { 
     setIconOpened(this); 
     } 
    } 
}); 

// create a function to set the open icon for the given panel 
// clearing out all the rest (activePanel CAN be null if nothing is open) 
function setIconOpened(activePanel) { 
    $('.panel-heading').find('b').addClass('closed').removeClass('opened'); 

    if (activePanel) 
    { 
    $(activePanel).find('b').addClass('opened').removeClass('closed'); 
    } 
} 

DEMO : http://www.bootply.com/0fHUqXpNn6#

참고 : 나는 당신이 실제로, 당신은 아마 다른 컨트롤이 이벤트를 설정해야합니다 클릭 콜백의 원인이됩니다 제목, 클릭,하지만 아코디언을 확장 할 수 없습니다 것으로 나타났습니다 실제 아코디언 클릭이 실행되지 않을 때 아이콘이 변경되는 것을 피하십시오.