CSS_CSS/HTML을 사용하여 트리 디렉터리를 만드는 방법에 대한 자습서

대부분의 Suoyi 전자잡지는 트리 디렉토리를 사용합니다. 메인 디렉토리를 마우스로 클릭하면 하위 디렉토리가 확장되고, 메인 디렉토리를 다시 클릭하면 하위 디렉토리가 닫힙니다. 단순하고 생동감 있고 가식적이지 않은 것 같습니다.

이런 트리형 디렉토리를 만드는 방법은 여러 가지가 있습니다. 최근에 먼저 다음 예를 살펴보았습니다. 메인 디렉토리를 마우스로 클릭하면 해당 하위 디렉토리가 내려오고, 다시 클릭하면 원래 상태로 돌아갑니다. 효과는 Soyi 전자 매거진의 카탈로그 효과와 정확히 동일합니다.

제작 방법 :
먼저 이 효과를 내는 코드를 다음과 같이 복사한 후, 코드를 조합하여 제작 방법을 설명합니다.
〈div id="main1" style= "color:blue " onclick="document.all.child1.style.display=(document.all.child1.style.display ==''none'')?'''':''none''" 〉
+ 메인 디렉토리 1〈/div〉
〈div id="child1" style="display:none"〉
〈a href="#"〉- 서브 디렉토리 1〈/a〉 〈br〉
〈 a href="#"〉- 하위 디렉터리 2〈/a〉 〈br〉
〈a href="#"〉- 하위 디렉터리 3〈/a〉 〈br〉
〈a href="# " 〉- 하위 디렉토리 4〈/a〉
〈/div〉
〈div id="main2" style="color:blue" onclick="document.all.child2.style.display=(document.all .child2.style.display ==''none'')?'''':''none''" 〉
+ 메인 디렉토리 2 〈/div〉
〈div id="child2" style= "display:none"〉
〈a href="#"〉- 하위 디렉터리 1〈/a〉 〈br〉
〈a href="#"〉- 하위 디렉터리 2〈/a〉 〈br〉
〈a href="#"〉- 하위 디렉터리 3〈/a〉
〈/div〉
참고: " "는 문자 공백을 나타냅니다.
1. 먼저 두 개의 DIV를 정의합니다. 하나는 기본 디렉터리입니다. , 이름을 main1로 지정하고, 해당 하위 디렉터리의 다른 이름은 child1로 지정합니다. 2. main1의 DIV에 "+ Main Directory 1"을 쓰고 여기에 마우스 클릭 이벤트를 로드합니다: onclick 및 작은 Javascript 프로그램: document.all.child1.style.display= (document.all.child1.style. 표시 ==''없음'')?'''':''없음''. 이 프로그램의 기능은 마우스가 main1의 DIV(즉, "+ Main Directory 1")를 클릭할 때 child1의 DIV가 숨겨져 있으면 표시되도록 하고, 그렇지 않으면 표시되도록 하는 것입니다. 숨겨진.
3. child1의 DIV에 하위 디렉터리를 작성하고 하이퍼링크로 설정합니다. 위 예시에서는 빈 링크를 설정했는데, 실제 제작에서는 해당 링크를 가리키도록 변경했습니다. 목표. CSS: style="display:none"을 child1의 DIV 정의에 추가합니다. 목적은 처음에 하위 디렉터리를 숨기는 것입니다.
다른 디렉터리를 만들려면 위의 세 단계를 반복하세요. F12를 눌러 효과를 확인하세요. 이 방법은 주로 CSS의 표시 속성(display)을 사용합니다. 그 특징 중 하나는 객체가 숨겨지면 객체가 차지하는 페이지 공간이 자동으로 포기된다는 것입니다. 우리는 CSS에 또 다른 속성이 있다는 것을 알고 있습니다. 가시성은 객체를 표시하고 숨기는 기능도 있지만 위의 트리 모양 디렉터리를 만드는 데 사용할 수는 없습니다. Visibility가 객체를 숨긴 후에는 객체가 차지한 공간이 해제되지 않기 때문입니다. 즉, 하위 디렉터리를 숨기면 하위 디렉터리의 위치가 그냥 비어 있고 위치가 해제되지 않으므로 다른 기본 디렉터리를 더 가까이 이동할 수 없습니다. 따라서 페이지 요소의 위치를 ​​고정해야 하는 경우에만 사용할 수 있습니다.