Node.js는 매우 간단한 확장 및 접기 디렉터리 code_javascript 기술을 구현합니다.

이 기사의 예에서는 js에서 구현된 매우 간단한 확장 및 접기 디렉터리 코드를 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 내용은 다음과 같습니다.

여기서 아주 간단한 디렉토리를 소개합니다. 메뉴 코드를 확장하고, 마우스를 클릭하면 확장되고, 다시 클릭하면 축소됩니다. 트리 메뉴의 기능과 비슷합니다. 인터넷에서 많이 봤지만, 안 할게요. 자세히 소개했으니 참고해주세요.

런닝 효과 스크린샷은 다음과 같습니다.

온라인 데모 주소는 다음과 같습니다.

http://demo.jb51.net/js/2015/js-show-hidden-list-menu-codes/

구체적인 코드는 다음과 같습니다.

<title>可折叠展开的简单目录</title>
<style>
div{
font-size:12px;
color:red;
background-color: #EAEAE8;
border: 1 solid #1892B5;
padding: 1
}
</style>
<div id="main1" style="color:blue" onclick="document.all.child1.style.display=(document.all.child1.style.display =='none')&#63;'':'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')&#63;'':'none'" > 
+ 主目录2 </div> 
<div id="child2" style="display:none"> 
<a href="#">- 子目录1</a> <br> 
<a href="#">- 子目录2</a> <br> 
<a href="#">- 子目录3</a> 
</div>

이 기사가 모든 사람의 JavaScript 프로그래밍 설계에 도움이 되기를 바랍니다.