버튼을 클릭하여 특정 div를 숨기는 방법은 무엇입니까?

Question

버튼 onclick 이벤트를 사용하여 특정 수의 div를 숨기는 방법을 찾고 있습니다.

.toggleClass('.AddCSSClassHere')와 관련이 있을 수 있다는 것을 알고 있지만 잘 모르겠습니다... div를 숨기거나 표시할 수는 있지만 상위 div 특정 div에 하나. jquery는 이전에 사용하고 싶었던 코드 조각에서 나왔습니다. hidethis 클래스 ""가 있는 모든 div는 "열 표시" 버튼

을 클릭할 때 표시되거나 숨겨져야 합니다.

$('button').click(function() {
  $(this).siblings('div').toggleClass('hidethis ');
});

* {
  여백: 0;
  패딩: 0;
}

HTML,
몸 {
  높이: 100%;
}

몸 {
  배경: #fff;
  패딩: 0;
  여백: 0;
  글꼴 계열: Myriad-Pro, Arial, 'Varela Round', sans-serif;
  글꼴 크기: 16px;
}

.인용 {
  높이: 100%;
  오버플로: 자동;
}

.main-div {
  위치: 끈적끈적함;
  상단: 0;
}

.header-div {
  디스플레이: 플렉스;
  패딩: 5px 0;
  배경색: #fff;
}

.제목 {
  디스플레이: 플렉스;
  너비: 100%;
  항목 정렬: 중앙;
}

.통화정보 {
  너비: 내용에 맞게;
  최대 너비: 100px;
  최소 너비: 100px;
  텍스트 정렬: 중앙;
  패딩: 0;
}

.정보 {
  너비: 내용에 맞게;
  최대 너비: 100px;
  최소 너비: 100px;
  텍스트 정렬: 중앙;
  패딩: 10px 0;
}

.통화 {
  최대 너비: 70px;
  최소 너비: 70px;
}

.테이블 정보 {
  디스플레이: 플렉스;
  플렉스 방향: 행;
  플렉스 랩: 랩;
  너비: 100%;
  오버플로-y: 스크롤;
}

.main-div-정보 {
  디스플레이: 플렉스;
  텍스트 정렬: 중앙;
  플렉스 방향: 행;
  플렉스 랩: 랩;
  너비: 100%;
}

.div-정보 {
  디스플레이: 플렉스;
  플렉스 방향: 행;
  플렉스 랩: 랩;
  너비: 100%;
  패딩: 10px 0;
  항목 정렬: 중앙;
}

.hidethis {
  디스플레이: 없음;
}

<섹션 클래스="인용문">

  

    

      

        

          열 표시
        
        

        

        

        
로컬
        

        

        

      
    
  

  

    

      

        
제품 이름
        
ID
        
수량
        
기간
        
 
        
단가
        
단가
        
단품 할인
      
    
  
  

    

      

        
 ;풀 스로틀

Answer 1

형제로서 대상 요소를 찾으려면 한 단계 위로 올라가야 합니다. 블록 수준 요소의 내용을 들여쓰면 더 나은 시각화에 도움이 됩니다.

모든 컨테이너에서 이러한 요소를 모두 토글하려면 클래스가 제거될 때 이를 추적할 수 있도록 새 클래스를 도입하거나, 모두 선택하고 요소 목록을 사용해야 합니다. p>

으아악 으아악 으아악