jquery toggleClass가 CSS 속성을 변경할 때 IE에서 작동하지 않지만 입력 값을 변경할 때 수행

Question

IE9에서이 문제의 해결 방법을 찾을 수 있는지 알아야 할 필요가 있으면 chrome/firefox에 완벽하게 표시되고 값은 다음과 같이 변경됩니다. 그것은 기대되지만 div는 높이를 확장하지 않습니다.

이 코드는 외부 .js 파일에 있으며 나는 html로 직접 사용하려하지 않았습니다.

HTML

<div class="active-collapsed">Some stuff here</div> 

CSS

.active-collapsed {height:345px;} 
.active-expanded {height:690px;} 
#exp-btn {margin-bottom:5px;width:80px;} 

의 jQuery v1.7.2

$(document).ready(function() { 

    jQuery('#exp-btn').click(function() { 
     $(".active-collapsed").toggleClass("active-expanded"); 


     if ($(this).val() == "+ profiles") { 
      $(this).val("- profiles"); 
     } else { 
      $(this).val("+ profiles"); 
     } 
    }); 

}); 

Answer 1

가 알고하지 마십시오

여기에 코드입니다, 당신의 도움을 주셔서 감사합니다 그것은 IE9에서 복제하지만 IE에서는 CSS 속성을 수정할 때 토글 링이 효과적이지 않음을 발견했습니다.

IE8 v8 not changing class for a DOM element despite JS function changing the element attribute

그래서,이 당신에게 적용되는지 확인하고 그에 따라 코드를 변경합니다.

Answer 2

http://jsfiddle.net/4UGck/4/은 IE9에서 완벽하게 작동합니다. 내가 한 일은 val()을 text()로 변경하고 오버플로를 추가 한 것입니다 : css에 숨겨져 있습니다.

$(function(){ 
    $('#exp-btn').click(function() { 
     $(".active-collapsed").toggleClass("active-expanded"); 


     if ($(this).text() == "+ profiles") { 
      $(this).text("- profiles"); 
     } else { 
      $(this).text("+ profiles"); 
     } 
    }); 

}); 

그리고 CSS

.active-collapsed {height:345px; overflow: hidden;}