jQuery로 확인하십시오.

Question

기본 요소와 보조 요소가 2 개 있습니다. 주요 요소를 클릭하면 두 번째 보조 요소가 토글됩니다.

$(".main").click(function() { 
    $(this).toggleClass("classA").toggleClass("classB"); 
    $(".secondary").toggleClass("classC").toggleClass("classD"); 
)); 

그러나 각 보조 항목을 개별적으로 클릭 할 수 있으며 클래스 토글은 해당 요소에만 영향을 미칩니다.

$(".secondary").click(function() { 
    $(".secondary").toggleClass("classC").toggleClass("classD"); 
)); 

체크/기능을 추가하여 모든 보조 요소가 토글되면 기본 토글도 전환해야합니다. 여기

$(".secondary").click(function() { 
    $(".secondary").toggleClass("classC").toggleClass("classD"); 
    $('.main').click(); 
)); 

체크 아웃 바이올린 :

Answer 1

이 시도 http://jsfiddle.net/maniator/bx9QQ/

코드 :

$("#main").click(function() { 
    $(this).toggleClass("classA").toggleClass("classB"); 
    $(".secondary").toggleClass("classC").toggleClass("classD"); 
}); 

$(".secondary").click(function() { 
    $(this).toggleClass("classC").toggleClass("classD"); 
    $("#main").click; 
}); 

HTML :

<div id='main'> 
    <div class='secondary'></div> 
    <div class='secondary'></div> 
</div> 

CS s :

#main { 
    background: grey; 
    height: 100px; 
    width: 150px; 
} 

.secondary { 
    background: blue; 
    height: 50px; 
    width: 90px; 
    margin: 0 auto; 
} 

.classA {background: green !important;} 
.classB {background: orange !important;} 
.classC {background: yellow;} 
.classD {background: purple;}