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

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("단순화"); / /문자 내용을 "단순화"로 변경
}
})





2. 렌더링 :

클릭 후:

단순화: