웹 디자인의 나무는 무엇입니까? 간단히 말하면 링크를 클릭하고 하위 디렉토리를 확장 한 다음이를 클릭하여 가입하십시오. 이것은 가장 간단한 나무입니다. 구현하는 방법? 또한 매우 간단합니다. CSS에는 속성 표시가 있습니다. 이것은 내용의 현실을 제어 할 수 있지만 여전히 표시되지 않습니다. 그런 다음 JS를 통해 CSS의 속성을 제어 할 수 있습니다. 다음 코드를 참조하십시오.
<div> Top Directory </div>
<div id = menulist>
<div> 메뉴 1 </div>
<div> 메뉴 2 </div>
<div> 메뉴 3 </div>
</div>
이것은 나무의 프로토 타입으로 간주됩니다. 물론 초기 상태는 CSS의 디스플레이 속성을 추가합니다. 가장 일반적으로 사용되는 디스플레이 속성은 없음 및 블록 속성입니다.
블록은 블록 유형 요소처럼 표시되는 반면 아무것도 표시되지 않습니다. 그런 다음 코드를보십시오
<div> Top Directory </div>
<div id = menulist style = display : none>
<div> 메뉴 1 </div>
<div> 메뉴 2 </div>
<div> 메뉴 3 </div>
</div>
이런 식으로 페이지를 실행하면 최상위 디렉토리 만 표시됩니다. 제어하면 JS 코드를 추가해야합니다.
1. 먼저 메울리스트를 얻으십시오
var menulist = document.getElementById (menulist);
2. 또는이 개체 후 CSS 속성을 제어 할 수 있습니다.
menulist.style.display = 블록;
판단을 추가하십시오
if (menulist.style.display = none)
menulist.style.display = 블록;
또 다른
menulist.style.display = 없음;
이런 식으로 가장 독창적 인 트리가 생성되고 최종 코드가 생성됩니다.
<cript>
함수 showmenu ()
{
var menulist = document.getElementById (menulist);
if (menulist.style.display == none)
menulist.style.display = 블록;
또 다른
menulist.style.display = 없음;
}
</스크립트>
<div on
클릭 = showmenu ();> 상단 디렉토리 </div>
<div id = menulist style = display : none>
<div> 메뉴 1 </div>
<div> 메뉴 2 </div>
<div> 메뉴 3 </div>
</div>
오랫동안이 방법에 따라 속성 디렉토리를 만들었습니다. 디렉토리를 아무리 복잡하게 만들 더라도이 방법은 시도하고 테스트되었습니다. 다음 스크린 샷은 IE에서 내가 만든 비교적 복잡한 트리 디렉토리의 작동 효과입니다.
Chrome에서 끔찍한 일이 일어 났고 완전히 엉망이되었습니다. 정보 검색 후 마침내 그 이유를 찾았습니다. 블록 및 없음 외에도 디스플레이에는 다른 많은 속성이 있습니다. 블록은 블록으로 표시됩니다. 나는 그것에 테이블에 놓여 있었다. 하나님은 테이블과 블록이 깊은 증오를 가지고 있는지 여부를 알고 있습니다. Microsoft는 그것이 증오를 영리하게 무시하고 있다고 생각했지만 Chrome은 여전히 표준을 매우 정직하게 순종했습니다. Firefox는 동일하므로 설명에 여전히 문제가 있습니다. 이 문제를 해결하는 방법 :
디스플레이에는 속성 테이블 셀도 있습니다. 이는 테이블 형태의 콘텐츠를 렌더링하는 것을 의미합니다. 이것은 레이아웃에 테이블을 사용하는 것과 정확히 일치합니다. 다음은 세 브라우저의 호환 렌더링입니다.
IE6
Chrome2
Firefox3.5