[jquery] 클래스 선택기, next 및 prev 메소드를 결합하여 인접 노드의 확장 및 숨기기 효과 달성
- 巴扎黑원래의
- 2017-06-22 10:00:361278검색
페이지 효과에서 때로는 프로그램에서 루프 아웃된 열을 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!