jQuery와 CSS를 사용하여 헤더 클릭으로 테이블 행 가시성을 전환하는 방법은 무엇입니까?

헤더 클릭 시 테이블 행 확장 및 축소

이 문서에서는 해당 헤더 열이 있을 때 특정 테이블 행을 확장 및 축소하는 문제를 다룹니다. 클릭했습니다.

제공된 HTML 테이블은 헤더 섹션이 교대로 포함된 행으로 구성됩니다. 원하는 동작을 달성하기 위해 jQuery의 기능을 활용할 것입니다.

jQuery 접근 방식

1. 헤더 요소 식별: .header 클래스를 사용하여 어떤 것을 결정합니다. 표 행은 헤더 역할을 합니다.
2. 가시성 전환: 헤더를 클릭하면 nextUntil 메소드를 사용하여 해당 행을 모두 선택합니다. 다음 헤더가 나타날 때까지 해당 헤더를 따릅니다. 그런 다음 SlideToggle 메소드는 선택한 행을 확장하거나 축소합니다.

코드 조각

<code class="javascript">$('.header').click(function(){
    $(this).nextUntil('tr.header').slideToggle(1000);
});</code>

CSS 및 의사 요소를 사용하는 대체 접근 방식

1. CSS 규칙: 확장/축소 기호(또는 -)를 나타내기 위해 :after 속성을 사용하여 의사 요소를 정의합니다.
2. CSS 클래스 전환: 클릭한 헤더에 '확장' 클래스를 할당하고 표시를 전환합니다. 의사 요소의 상태

코드 스니펫

<code class="css">.header .sign:after{
  content:"+";
  display:inline-block;      
}
.header.expand .sign:after{
  content:"-";
}</code>

<code class="javascript">$(this).toggleClass('expand').nextUntil('tr.header').slideToggle(100);</code>

이 대체 접근 방식을 사용하면 여러 CSS 클래스를 추적할 필요가 없어 구현이 단순화됩니다.

위 내용은 jQuery와 CSS를 사용하여 헤더 클릭으로 테이블 행 가시성을 전환하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!