이 전환이 작동하지 않는 이유는 무엇입니까? (jQuery 토글 + CSS)

Question

수업을 전환 할 때 전환이 사라 졌나요? 나는 HTML도 추가하고 싶었지만 stackoverflow는 내 질문이 주로 코드라고 말하면서 저장하지 못하게했다. 그래서 codepen 링크를 추가했는데, 지금은 잘 작동한다. 나는 방금 편집했다.

<div class="container"> 
    <div class="row"> 
    <div class="col bg-primary one"> 
     <h1>some text</h1> 
    </div> 
    <div class="col bg-danger two"> 
     <h1>hidden text</h1> 
    </div> 
    </div> 
</div> 

.two { 
    visibility: hidden; 
    display: none; 
    opacity: 0; 
    transition: all 1s ease-out; 
} 

.is-visible { 
     display: block; 
      visibility: visible; 
      opacity: 1; 
      transition: all 1s ease-out; 
} 

$('.row').click(function(){ 
    $(this).children('.two').toggleClass('is-visible'); 
}); 

Answer 1

https://codepen.io/anon/pen/pdmpNE

은 내가 당신이 찾고 있던 함께 무엇을 조합해서 생각하지만, 다음 형식으로 모든 코드 질문을하시기 바랍니다. 또한 Codepen을 추가하려면 CSS와 JS를 실제로 추가해야합니다. 여기에 CSS와 JS를 추가해야합니다.

내가 변경 한 사항은 두 번째 div에 .two 클래스를 추가하고 문서가 준비되면 $ ('. 행) .click() 함수를 만들었습니다.

다음

<div class="col bg-danger two"> 
    <h1>hidden text</h1> 
</div> 

는 JS입니다 : 여기

는 HTML의

$('document').ready(function() { 
    $('.row').click(function(){ 
    $(this).children('.two').toggleClass('is-visible'); 
    }); 
}); 

Here's the Codepen displaying the changes.