자바스크립트 정적 트리 메뉴 구현 code_navigation 메뉴

누구든지 관심이 있다면 동적으로 데이터를 로드하도록 변경하거나 jquery를 사용할 수 있습니다. 코드는 확실히 훨씬 줄어들 것입니다! CSS를 추가하면 이 트리가 정적 페이지에서 매우 유용하다는 것을 알았습니다!

<style type="text/css"> .expand{ cursor:pointer; } .hide{ cursor:pointer; } </style> <h3> </h3>정의 목록을 트리로 변환할 수도 있습니다. <dl id="tree"> <dt> </dt>메뉴 1<dd> </dd>1.1아아<dd> </dd>1.2bbb<dd> </dd>1.3cc<dt> </dt>메뉴 2<dd> </dd>2.1 안녕하세요<dd> <a href="http://www.baidu.com"></a>하이퍼링크</dd> <dt> </dt>메뉴 3<dd> <dl style="margin-top:2px; margin-bottom:2px;"> <dt> </dt>3.1<dd> <a href="http://news.baidu.com"></a>바이두 뉴스</dd> <dd> <a href="http://news.sohu.com"></a>소후뉴스</dd> <dt> </dt>3.2<dd> <a href="http://news.baidu.com"></a>바이두 뉴스</dd> <dd> <a href="http://news.sohu.com"></a>소후뉴스</dd> </dl> </dd> </dl>
[Ctrl A 모두 선택 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다

]