아코디언 위치에 따라 위 또는 아래를 가리키는 셰브론 아이콘

Question

jQuery UI를 사용하여 작성한 아코디언이 있습니다. 섹션이 열려 있거나 닫혀 있는지에 따라 위 또는 아래를 가리키는 쉐브론 아이콘이 필요합니다. 문제는 내 jQuery입니다. 적어도 처음에는 그렇습니다. 나는 두 쉐브론이 모두 보이고 한 번 클릭하면 쉐브론이 전혀 변하지 않습니다.

jQuery를

는

$(function() { 

    $(".section a").click(function() { 

      $(".chevron").removeClass("chevron").addClass("up"); 
    }); 
}); 

CSS

.chevron { 
background: url("images/down.png") no-repeat; 
} 

.up { 
background: url("images/up.png"); 
} 

HTML은

당신은 this를 참조 할 필요가

<div class="section"> 
    <a href="#"><div class="tab active"> 
    <span class="chevron"></span><h3>Section 1</h3> 
    </div></a> <!-- tab --> 

Answer 1

그래서 (한 번에 모든 이들의) 당신이 클릭하는 요소를 전환 . $(this)을 받으면 .find을 사용하여 링크 내에서 갈매기 형 수색을 검색 할 수 있습니다.

마지막으로 toggleClass을 사용하여 클래스 상태를 전환 할 수 있습니다. 이렇게하면 링크를 반복적으로 클릭하고 클래스 상태를 전환 할 수 있습니다.

$(function() { 
    //Add down to all .chevrons 
    $(".section a .chevron").addClass('down'); 

    //Toggle up/down classes 
    $(".section a").click(function() { 
     var $chevron = $(this).find('.chevron');     
     $chevron.toggleClass("down up"); 
    }); 
}); 

나서 CSS 대한 올바른 쉐브론 이미지 클래스을 설정 가능한 경우

.chevron.up { background-image('images/up.png'); } 
.chevron.down { background-image('images/down.png'); }