[jquery] 클래스 선택기, next 및 prev 메소드를 결합하여 인접 노드의 확장 및 숨기기 효과 달성-JS 튜토리얼-php.cn

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

巴扎黑

풀어 주다： 2017-06-22 10:00:36

원래의

1233명이 탐색했습니다.

페이지 효과에서 때로는 프로그램에서 루프 아웃된 열을 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 메서드를 사용하는 것입니다. 물론 다른 상황에서도 사용할 수 있습니다.