콘텐츠를 표시하기 위해 클래스를 적용하는 대신`.toggle()`사용하기

Question

나는 회의에서 사용할 간단한 웹 사이트를 만들고 있는데, 효과를 얻으려면 두 가지 방법의 함축 된 의미를 이해하고 싶습니다. 이것은 내가 그것을 직관적 인 작업이 요소를 활용할 수 있기 때문에 시작 방법이 표시 내용의 가지고있는 콘텐츠

를 표시하거나 숨길 수 .toggle()를 사용

. 그러나 한 번에 하나의 열린 div를 제한하려고하면 문제가 발생합니다.

요약 열린 요소의 수를 제한하는 데 문제가 있습니다. 이 방법을 사용 jQuery를

함께 active 클래스 적용

가

---

, I는 자식 요소를 선택하여 숨겨진 콘텐츠를 표시 할 수있다 (아래 코드 참조), 그러나 이것은하여 콘텐츠를 닫는 사용자 중지 다시 그것을 두드리는 것. div를 가로로 확장하기 때문에 스크롤 공간이 추가되어 이상적인 것은 아닙니다.

요약 : 이 방법으로 두 번째 클릭시 활성 div를 어떻게 닫습니까?

---

CodePen Demo-Staged site

이 방법은 활성 클래스를 적용하는 CSS를 사용

관련 코드입니다. 그것은 작동하지만, 위에서 말했듯이, 다시 도청 된 요소에서 active 클래스를 제거하는 데 어려움을 겪고 있습니다. 위의 링크 된 데모를 사용하여 페이지에서 토글 액션이 어떻게 작동하는지 확인하십시오 (8 행 및 9 줄의 주석 표시 제거).

$(".title").click(function() { 
    //remove active class from other elements 
    $('.post').removeClass('active'); 
    // Bind to the div 
    $post = $(this); 
    // Set active class on .post to control scroll position 
    $post.parent().toggleClass('active'); 
    // Toggles the hidden .content div 
    //$post.next().toggle(250); 
    $('html, body').animate({scrollLeft: $('.active').offset().left},500); 
}); 

첨부 .active CSS :

.post .content { 
    display:none; 
} 
.active { 
    margin-top:-120px; 
} 

/* Shows the content div rather than toggling with jQuery */ 
.active > .content { 
    display:block; 
} 

내가 모두 행동 (탭 한 번에/닫기 1 명, DIV를 엽니 다) 허용 할 수있는 방법이 있나요? 어떤 방법이 가장 적합합니까?