확장 트리 메뉴 목록은 내가 달성하고자하는 것은

내가 항목이 확장 될 때 페이지의 왼쪽에 나타납니다 트리보기 목록을 갖고 싶어

,이 항목은로드의 데이터베이스에서, (나는이 부분을 수행 할 수 있습니다) 그래서 기본적으로는 다음과 같이 갈 것입니다 : 데이터를 DB에서 잡고 페이지에 추가 될 때까지

+Category1 
+Category2 
+Category3 
+Category4

사용자가 + 클릭

, 그것은 아래에 표시됩니다 :

+Category1 
-Category2 
    loading ... 
+Category3 
+Category4

데이터가로드 된 후 각 하위 카테고리에는 하위 하위 카테고리가 있습니다.

+Category1 
-Category2 
    +Sub-Cat1 
    +Sub-Cat2 
    +Sub-Cat3 
    +Sub-Cat4 
+Category3 
+Category4

어떻게하면됩니까?

참고 : 내가 넣어하는 방법을 알고 싶어

이

당신의 도움이 (* 또는 > 또는 목록의 다른 기호를, 나는!이 CSS하지만 난 전혀 디자인 작동하지 않습니다 생각) 정말 감사합니다.

2011-12-14 sikas

확인

, 그래서 나는이 clase는 CSS에서 다음과 같이 보일 것이다, 당신은 폐쇄라는 클래스를 추가 할 수있는 항목의 목록은 모든 항목에 ul 가정 :

.closed:before{content:'+';} 
.opened:before{content:'-';}

을 다음 <자바 스크립트 i 번째, 너는 그 수업을 토글한다. 위의 CSS에서 + 및 - 기호에 다른 스타일을 추가하여 테두리 및 배경색을 지정할 수도 있습니다.

2011-12-14 14:35:42 bigblind

여기에 대한 HTML 코드가 있습니까? 나는 그 질문에 정확하게 나타 내기를 원한다. – sikas

예를 들어, jquery의'.text (newtext)'메소드가 열렸을 때 -를 사용하여 요소의 텍스트 앞에 -를 붙이면 제거 할 수 있고, 섹션이 다시 닫힐 때 +로 바꿀 수 있습니다. 그런 나무를 만들 HTML이 없습니다. – bigblind

Frederik Creemers, HTML로 작업하지 않습니다. 모든 작업은 PHP와 MySQL을 중심으로 이루어 지므로 ... 예제 코드를 제공하여 주시면 감사하겠습니다. 나는 좋은 것을 찾았지만 주 튜토리얼을 발견했다. – sikas

브라우저 요구 사항이 있습니까? selectivizr과 함께 [CSS] Ninja 예제를 사용하여 이전 버전의 IE를 지원합니다.

그리고 selectivizr : 예는 그것을 사용으로 설치된다

떨어져 [CSS] 닌자 사이트가 뭔지에서 접근 예를 들어,하지 마세요 파일 네비게이션 시나리오를 사용하지만 폴더와 파일 아이콘을 제거하기 위해 쉽게 수정할 수 있어야합니다.

2011-12-14 15:42:40

답변