기존 클래스에 Jquery 규칙을 사용하여 동적으로 추가하기

Question

Jquery를 사용하여 규칙을 기존 클래스에 동적으로 추가하고 싶지만 사용자가 버튼을 클릭 할 때까지 HTML 요소에 기인하지 않습니다. How to add property to existing class에 제안

$('.show-toggle').css("max-height", width * 0.5); 

하지만 클래스가 처음에는 활성화되지 않기 때문에 작동하지 않습니다 생각 :

나는 시도했다.

HTML

<div id ="toggler"></div> 
<div id = "toogle" class="hide-toggle"> 

CSS (jQuery로)

.hide-toggle { 
display:none 
} 

.show-toggle { 
display : block; 
} 

JS

$('#toggler').click(function() { 

var width = $(window).width(); 
$('.show-toggle').css("max-height", width * 0.5); 
$("#toggle").toggleClass('hide-toggle').toggleClass('show-toggle'); 

}); 

Answer 1

가에 .css (넣어) 후 .toggleClass() :

$(document).ready(function(){ 
    $("#toggler").click(function(){ 
    var width = $(window).width(); 
    $("#toggle").toggleClass("hide-toggle, show-toggle"); 
    $(".show-toggle").css("max-height", width*0.5); 
    }); 
}); 

#toggle에 .show-toggle 클래스가있는 경우 CSS 변경이 실행될 수 있습니다. 클래스 .show - 토글로하는 요소가 없을 때 jQuery를이 클래스 .show-전환에 .CSS()를 실행할 수 없기 때문에

바이올린 : https://jsfiddle.net/p15rcmn4/4/