[jquery] 클래스 선택기, next 및 prev 메소드를 결합하여 인접 노드의 확장 및 숨기기 효과 달성

페이지 효과에서 때로는 프로그램에서 루프 아웃된 열을 ID속성으로 추가할 수 없습니다. 여러 개의 동일한 ID를 루프 아웃할 수 있는 목록이 있을 수 있으므로 Jquery의 ID 선택기를 사용할 수 없기 때문입니다. 이때 클래스 선택기를 사용할 수 있습니다.

동시에 이 노드 요소의 작동을 현재 p(또는 테이블)로 제한해야 할 수도 있습니다. 코드를 살펴보겠습니다.

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
html xmlns="http://www.w3.org/1999/xhtml">
head>
     meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    title >jquery效果title>
    script src="http://common.cnblogs.com/script/jquery.js"  type="text/javascript">script>
    script type="text/javascript" > #          $(
".part"). click(
function () {               var hideP 
= $(this).next();                if (hideP.css('display') == 'none' ) {
                   hideP.show(); ㅋㅋㅋ | ㅋㅋㅋ 
= $(
this
).prev( );               if

 (hideP.css('display

'
) == ' 없음'
) {                   hideP.show() ;                   $(this).hide();               }​​​}             });              })

head>


body> p
class='classA'>
                       | ;                                                       p
> p> p class='classA'>​​​​p 수업 ="part"
>콘텐츠 2p>        ="all" 스타일 ="display:none"> 콘텐츠 2 , 하하하, 확장했습니다. 여기에 더 많은 콘텐츠가 있습니다 p
>​​ p
>                           ~p class="part">콘텐츠 3p>
class="all" style =" 디스플레이:없음">콘텐츠 3, 하하하, 확장했습니다. 여기에 더 많은 콘텐츠가 있습니다p>​​​​ p
> to 같은 클래스의 다른 콘텐츠A. 실제로 여기서 초점은 jquery next 및 prev 메서드를 사용하는 것입니다. 물론 다른 상황에서도 사용할 수 있습니다.

위 내용은 [jquery] 클래스 선택기, next 및 prev 메소드를 결합하여 인접 노드의 확장 및 숨기기 효과 달성의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!