접었다 폈다하는 아코디언 메뉴 1

게시자: 대문 demun 카테고리: 퍼블리셔/jQuery 2012.07.02 06:00
아코디언 메뉴중에서 가장 심플한 아코디언 메뉴 1번입니다. 
오늘 이야기하는 아코디언 메뉴는 웹디자이너를 위한 jquery 입니다.
이 메뉴는 이미지가 하나도 없습니다. 실무에서 바로 사용이 가능한 아주 간단한 메뉴입니다.
자바스크립트 아코디언 메뉴 =>  http://demun.tistory.com/2139 
jquery cookbook 의 아코디언 메뉴 =>  http://demun.tistory.com/2083 

먼저 전체 소스를 공개합니다.

여기서는 jquery 에 대한 이야기만 해보겠습니다.
주석을 상세하게 달아놧으니 이해가 가실겁니다.

$(function(){

	// 모든 패널이 펼쳐져있는 상태이기 때문에 dd의 첫번재를 제외한곳은 안보이게 설정합니다.
	$("dd:not(:first)").css("display","none");

	//dl 의 dt 를 클릭했을때
	$("dl dt").click(function(){

		// 만약 클릭한 태그 다음에 있는 dd 태그의 속성이 none 이면
		if($("+dd",this).css("display")=="none"){

			// dd 태그에 대해서 슬라이드업을 합니다. 즉 패널이 닫히는겁니다.
			$("dd").slideUp("slow");

			// 이어서 이접한 dd 에 슬라이드 다운을 합니다.
			$("+dd",this).slideDown("slow");
		}
	});
});



신고

댓글

  1. 2012.08.20 17:22 신고 궁금해요  댓글주소  수정/삭제  댓글쓰기

    궁금한게 있는데요
    올려주신 소스로 메뉴를 만들었어요 1번안에 소메뉴 이미지를 넣었는데 소메뉴 이미지를 클릭하면 화면이 1번메뉴가 펼쳐진채로 나오더라구요 그래서 2번메뉴안에 소메뉴를 클릭했을때 2번 메뉴가 펼쳐진체로 나오지 않고 1번메뉴가 펼쳐져있는 상태로 떠서요..ㅜㅜ

    소스중에


    // 모든 패널이 펼쳐져있는 상태이기 때문에 dd의 첫번재를 제외한곳은 안보이게 설정합니다.
    $("dd:not(:first)").css("display","none");

    첫번째를 펼쳐있게하지 않고 클릭한곳이 펼쳐져 있도록 고정 할 수 있는방법은 없나요???

    • BlogIcon 대문 demun 2012.08.21 10:19 신고  댓글주소  수정/삭제

      위에는 클릭한곳이 펼쳐지게끔 만들어져 잇는것입니다.
      첫번째가 펼쳐져잇는것이 싫고 모두 닫쳐져 잇는것을 원하면 $("dd:not(:first)").css("display","none");
      에서 $("dd).css("display","none"); 으로 수정하면 됩니다.

  2. 2013.02.10 01:33 신고 BlogIcon Milkymoon  댓글주소  수정/삭제  댓글쓰기

    질문이 있는데요.
    아코디언을 처음 시작할때 두번째부터 시작하려고 하면 어떻게 해야하나요?
    그러니까 지금은 처음이 펼쳐져 있는데, 두번째가 펼쳐지게 하고 싶어서요.

    퍼스트 대신 세컨드로 넣어봤는데 전부다 펼쳐지고 원하는 상황이 안나오네요.

    • BlogIcon 대문 demun 2013.02.10 20:00 신고  댓글주소  수정/삭제

      어떤게 정답이다....라고 말할수 없습니다. 왜냐면 원하는목적을 이루기위해서는 많은 방법이 존재하기때문입니다.
      질문하신것은 두번째가 처음부터 열리게하려면...
      $("dd:not(:first)").css("display","none"); 을
      $("dd:not(:nth-child(2)).css("display","none"); 을 사용하면 될것같습니다.

      바로 nth-child(n) 을 이용해서 처음에 열리는곳을 지정하면 될것 같아요....안해봤지만...

    • BlogIcon Milkymoon 2013.02.11 06:31 신고  댓글주소  수정/삭제

      어렵네요..^^;; 먹히지 않는군요.
      필요한 소스였는데.. 흠......
      답변 고맙습니다.