jquery 시작하기 - 탐색 모음 작성(확장 가능)_jquery

1. 네비게이션 바를 작성하세요. 제목을 클릭하면 네비게이션 바의 내용을 확장 및 축소하거나, 내용을 단순화하거나, 더 많은 내용을 표시할 수 있습니다.
샘플 코드는 다음과 같습니다:

코드 복사 코드는 다음과 같습니다.

TITLE> 새 문서

NAME="키워드" CONTENT= "">



<스크립트 유형 ="text/javascript"> ;
$(function(){ //페이지 로딩 이벤트
$(".clsHead").click(function(){ //이미지 클릭 이벤트
if($ (".clsContent").is(":visible")){ //콘텐츠가 보이는 경우
$(".clsHeadspan img").attr("src","Images/a1.gif") ; //이미지 변경
$ (".clsContent").css("display","none") //콘텐츠 숨기기
}else{
$(".clsHeadspan img") .attr("src","Images/ a2.gif"); //이미지 변경
$(".clsContent").css("display","block");//콘텐츠 표시
}
});
$ (".clsBot > a").click(function(){ //핫링크 클릭 이벤트
if($(".clsBot > a").text ()=="Simplify"){ // 내용이 '단순화'된 경우
$("ul li:gt(4):not(:last)").hide() //인덱스가 있는 요소 숨기기 4보다 크고 마지막 항목이 아닌 숫자
$(".clsBot > a").text("more") //문자 내용을 "more"로 변경
}else{
$ ("ul li:gt(4): not(:last)").show().addClass("GetFocus"); //선택한 요소 표시 및 스타일 추가
$(".clsBot > a" ).text("단순화"); / /문자 내용을 "단순화"로 변경
}
})

도서 카테고리

;span>

( 1110 )

• 어린이 ( 1560 ) < ;/i>


• 인생 ( 870 )
  
• 사회 과학 ( 1460 )
;a href="#">관리 ( 1450 )

• 컴퓨터< /a> ( 1780 )


• 교육 ;/i>


• 참고서 ( 3450 )
🎜>
• 도입 버전 ( 980 )
a href="#">기타 카테고리 ;/a> ( 3230 )

단순화

>

2. 렌더링 :

클릭 후:

단순화: