Jquery : SlideToggle에서 부모 요소의 텍스트를 변경 하시겠습니까? 다음과 같이 내가 slideToggle를하고있는 중이 야

Question

:

$(document).ready(function(){  
     $("#show_morecats").click(function(){ 
     $("#morecats").slideToggle("slow"); 
     $("#show_morecats").css("background-color","#399C05"); 
    }); 
}); 

HTML

나는 빨간색이 될 것입니다 다음 morecats DIV 슬라이드 효과와 more 링크의 색상으로 열립니다 More 링크를 클릭 할 때

<a href="#" id="show_morecats">More</a> 
<div id="morecats" style="display:none;">Some text</div> 

지금 내가 원하는 다시 more 링크를 클릭하면 링크가 닫히고 링크 색상이 파란색으로 바뀝니다.

SlideToggle은 정상적으로 작동하지만 링크 색상이 올바르게 작동하지 않습니다. 같은 것을하는 jquery에서 div를 토글하고 같은 시간에 기본 요소의 클래스 나 CSS를 토글하는 함수가 있다는 것을 알고 있기 때문에 눈에 보이는 조건을 넣고 싶지는 않습니다. 그러나 정확한 함수와 사용법은 무엇입니까? . 나는 그것에 관해 찾았지만 아무것도 얻지 못했다.

누구든지이 토글 링 문제를 해결할 수있는 가장 짧은 방법을 제안 해 주실 수 있습니까?

Answer 1

닫을 때 파란색의 뒤쪽으로 열 때 색상 변화를 달성 할 수있는 가장 좋은 방법은 ... 사용자 정의 클래스 ... 당신이 클래스를 전환 할 수 있습니다 이런 식으로 함께

jQuery를 :

$(document).ready(function(){ 
    $('#show_morecats').bind('click', function(){ 
     $('#morecats').slideToggle('slow', function() { 
      $('#show_morecats').toggleClass("opened"); 
     }); 
    }); 
}); 

HTML :

<a href="#" id="show_morecats">More</a> 
<div id="morecats" style="display:none;">Some text</div> 

CSS :

#show_morecats { color: blue; } 
#show_morecats.opened { color: red; } 

Answer 2

일단 애니메이션이 완성되면 배경색을 변경하고 싶다는 것입니다. 이것이 slideToggle의 콜백 인수입니다.

변경 두 번째 줄에 : 나는 정직 해요 경우에 당신이 질문을 표현한 한 방법은, 조금 혼란하지만

$('#morecats').slideToggle('slow', 
    function() { $('#show_morecats').css({ backgroundColor: '#399C05' }); 
}); 

당신은 또한 toggleClass() 방법을 사용할 수 있습니다.