지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > JS 튜토리얼 > 본문

JS는 3단계 접기 메뉴 특수 효과를 구현하고 다른 레벨에서는 자동으로 축소할 수 있습니다.javascript 기술

WBOY
풀어 주다： 2016-05-16 15:46:41
원래의
1873명이 탐색했습니다.

이 기사의 예에서는 JS를 사용하여 3단계 접기 메뉴 효과를 구현하는 방법을 설명하고 있으며, 다른 수준은 자동으로 축소될 수 있습니다. 참고용으로 공유해 드립니다. IE6, IE7, IE8, FF, Chrome 및 기타 브라우저에서 정상적으로 실행됩니다.
팁: CSS의 #menu ul에서 {height:100px;overflow:auto;}를 제거하여 적응력을 높이세요
작동 효과도는 다음과 같습니다.

구현 코드는 다음과 같습니다. 

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>三级折叠菜单</title>
<style>
*,body,ul,h1,h2{ margin:0; padding:0; list-style:none;}
body{font:12px "宋体"; padding-top:20px;}
a{ color:#777;border:none;}
#menu { width:200px; margin:auto;}
 #menu h1 { font-size:12px; border:#C60 1px solid; margin-top:1px; background-color:#F93;}
 #menu h2 { font-size:12px; border:#E7E7E7 1px solid; border-top-color:#FFF; background-color:#F4F4F4;}
 #menu ul { padding-left:15px; height:100px;border:#E7E7E7 1px solid; border-top:none;overflow:auto;}
 #menu a { display:block; padding:5px 0 3px 10px; text-decoration:none; overflow:hidden;}
 #menu a:hover{ color:#6F0; background:#000;}
 #menu .no {display:none;}
 #menu .h1 a{color:#6F0;}
 #menu .h2 a{color:#06F;}
 #menu h1 a{color:#FFF;}
</style>
<script language="JavaScript">
<!--//
function ShowMenu(obj,n){
 var Nav = obj.parentNode;
 if(!Nav.id){
 var BName = Nav.getElementsByTagName("ul");
 var HName = Nav.getElementsByTagName("h2");
 var t = 2;
 }else{
 var BName = document.getElementById(Nav.id).getElementsByTagName("span");
 var HName = document.getElementById(Nav.id).getElementsByTagName("h1");
 var t = 1;
 }
 for(var i=0; i<HName.length;i++){
 HName[i].innerHTML = HName[i].innerHTML.replace("-","+");
 HName[i].className = "";
 }
 obj.className = "h" + t;
 for(var i=0; i<BName.length; i++){if(i!=n){BName[i].className = "no";}}
 if(BName[n].className == "no"){
 BName[n].className = "";
 obj.innerHTML = obj.innerHTML.replace("+","-");
 }else{
 BName[n].className = "no";
 obj.className = "";
 obj.innerHTML = obj.innerHTML.replace("-","+");
 }
}
//-->
</script>
</head>
<body>
<div id="menu">
 <h1 onClick="javascript:ShowMenu(this,0)"><a href="javascript:void(0)">+ 一级菜单A</a></a></h1>
 <span class="no">
 <h2 onClick="javascript:ShowMenu(this,0)"><a href="javascript:void(0)">+ 一级菜单A_1</a></a></h2>
 <ul class="no">
  <a href="javascript:void(0)">一级菜单A_0</a>
  <a href="javascript:void(0)">一级菜单A_1</a>
  <a href="javascript:void(0)">一级菜单A_2</a>
  <a href="javascript:void(0)">一级菜单A_3</a>
  <a href="javascript:void(0)">一级菜单A_4</a>
  <a href="javascript:void(0)">一级菜单A_5</a>
  <a href="javascript:void(0)">一级菜单A_6</a>
  <a href="javascript:void(0)">一级菜单A_7</a>
  <a href="javascript:void(0)">一级菜单A_8</a>
  <a href="javascript:void(0)">一级菜单A_9</a>
 </ul>
 <h2 onClick="javascript:ShowMenu(this,1)"><a href="javascript:void(0)">+ 一级菜单A_2</a></h2>
 <ul class="no">
  <a href="javascript:void(0)">一级菜单A_0</a>
  <a href="javascript:void(0)">一级菜单A_1</a>
  <a href="javascript:void(0)">一级菜单A_2</a>
  <a href="javascript:void(0)">一级菜单A_3</a>
  <a href="javascript:void(0)">一级菜单A_4</a>
  <a href="javascript:void(0)">一级菜单A_5</a>
  <a href="javascript:void(0)">一级菜单A_6</a>
  <a href="javascript:void(0)">一级菜单A_7</a>
  <a href="javascript:void(0)">一级菜单A_8</a>
  <a href="javascript:void(0)">一级菜单A_9</a>
 </ul>
 <h2 onClick="javascript:ShowMenu(this,2)"><a href="javascript:void(0)">+ 一级菜单A_3</a></h2>
 <ul class="no">
  <a href="javascript:void(0)">一级菜单A_0</a>
  <a href="javascript:void(0)">一级菜单A_1</a>
  <a href="javascript:void(0)">一级菜单A_2</a>
  <a href="javascript:void(0)">一级菜单A_3</a>
  <a href="javascript:void(0)">一级菜单A_4</a>
  <a href="javascript:void(0)">一级菜单A_5</a>
  <a href="javascript:void(0)">一级菜单A_6</a>
  <a href="javascript:void(0)">一级菜单A_7</a>
  <a href="javascript:void(0)">一级菜单A_8</a>
  <a href="javascript:void(0)">一级菜单A_9</a>
 </ul>
 <h2 onClick="javascript:ShowMenu(this,3)"><a href="javascript:void(0)">+ 一级菜单A_4</a></h2>
 <ul class="no">
  <a href="javascript:void(0)">一级菜单A_0</a>
  <a href="javascript:void(0)">一级菜单A_1</a>
  <a href="javascript:void(0)">一级菜单A_2</a>
  <a href="javascript:void(0)">一级菜单A_3</a>
  <a href="javascript:void(0)">一级菜单A_4</a>
  <a href="javascript:void(0)">一级菜单A_5</a>
  <a href="javascript:void(0)">一级菜单A_6</a>
  <a href="javascript:void(0)">一级菜单A_7</a>
  <a href="javascript:void(0)">一级菜单A_8</a>
  <a href="javascript:void(0)">一级菜单A_9</a>
 </ul>
 <h2 onClick="javascript:ShowMenu(this,4)"><a href="javascript:void(0)">+ 一级菜单A_5</a></h2>
 <ul class="no">
  <a href="javascript:void(0)">一级菜单A_0</a>
  <a href="javascript:void(0)">一级菜单A_1</a>
  <a href="javascript:void(0)">一级菜单A_2</a>
  <a href="javascript:void(0)">一级菜单A_3</a>
  <a href="javascript:void(0)">一级菜单A_4</a>
  <a href="javascript:void(0)">一级菜单A_5</a>
  <a href="javascript:void(0)">一级菜单A_6</a>
  <a href="javascript:void(0)">一级菜单A_7</a>
  <a href="javascript:void(0)">一级菜单A_8</a>
  <a href="javascript:void(0)">一级菜单A_9</a>
 </ul>
 <h2 onClick="javascript:ShowMenu(this,5)"><a href="javascript:void(0)">+ 一级菜单A_6</a></h2>
 <ul class="no">
  <a href="javascript:void(0)">一级菜单A_0</a>
  <a href="javascript:void(0)">一级菜单A_1</a>
  <a href="javascript:void(0)">一级菜单A_2</a>
  <a href="javascript:void(0)">一级菜单A_3</a>
  <a href="javascript:void(0)">一级菜单A_4</a>
  <a href="javascript:void(0)">一级菜单A_5</a>
  <a href="javascript:void(0)">一级菜单A_6</a>
  <a href="javascript:void(0)">一级菜单A_7</a>
  <a href="javascript:void(0)">一级菜单A_8</a>
  <a href="javascript:void(0)">一级菜单A_9</a>
 </ul>
 <h2 onClick="javascript:ShowMenu(this,6)"><a href="javascript:void(0)">+ 一级菜单A_7</a></h2>
 <ul class="no">
  <a href="javascript:void(0)">一级菜单A_0</a>
  <a href="javascript:void(0)">一级菜单A_1</a>
  <a href="javascript:void(0)">一级菜单A_2</a>
  <a href="javascript:void(0)">一级菜单A_3</a>
  <a href="javascript:void(0)">一级菜单A_4</a>
  <a href="javascript:void(0)">一级菜单A_5</a>
  <a href="javascript:void(0)">一级菜单A_6</a>
  <a href="javascript:void(0)">一级菜单A_7</a>
  <a href="javascript:void(0)">一级菜单A_8</a>
  <a href="javascript:void(0)">一级菜单A_9</a>
 </ul>
 <h2 onClick="javascript:ShowMenu(this,7)"><a href="javascript:void(0)">+ 一级菜单A_8</a></h2>
 <ul class="no">
  <a href="javascript:void(0)">一级菜单A_0</a>
  <a href="javascript:void(0)">一级菜单A_1</a>
  <a href="javascript:void(0)">一级菜单A_2</a>
  <a href="javascript:void(0)">一级菜单A_3</a>
  <a href="javascript:void(0)">一级菜单A_4</a>
  <a href="javascript:void(0)">一级菜单A_5</a>
  <a href="javascript:void(0)">一级菜单A_6</a>
  <a href="javascript:void(0)">一级菜单A_7</a>
  <a href="javascript:void(0)">一级菜单A_8</a>
  <a href="javascript:void(0)">一级菜单A_9</a>
 </ul>
 <h2 onClick="javascript:ShowMenu(this,8)"><a href="javascript:void(0)">+ 一级菜单A_9</a></h2>
 <ul class="no">
  <a href="javascript:void(0)">一级菜单A_0</a>
  <a href="javascript:void(0)">一级菜单A_1</a>
  <a href="javascript:void(0)">一级菜单A_2</a>
  <a href="javascript:void(0)">一级菜单A_3</a>
  <a href="javascript:void(0)">一级菜单A_4</a>
  <a href="javascript:void(0)">一级菜单A_5</a>
  <a href="javascript:void(0)">一级菜单A_6</a>
  <a href="javascript:void(0)">一级菜单A_7</a>
  <a href="javascript:void(0)">一级菜单A_8</a>
  <a href="javascript:void(0)">一级菜单A_9</a>
 </ul>
 <h2 onClick="javascript:ShowMenu(this,9)"><a href="javascript:void(0)">+ 一级菜单A_10</a></h2>
 <ul class="no">
  <a href="javascript:void(0)">一级菜单A_0</a>
  <a href="javascript:void(0)">一级菜单A_1</a>
  <a href="javascript:void(0)">一级菜单A_2</a>
  <a href="javascript:void(0)">一级菜单A_3</a>
  <a href="javascript:void(0)">一级菜单A_4</a>
  <a href="javascript:void(0)">一级菜单A_5</a>
  <a href="javascript:void(0)">一级菜单A_6</a>
  <a href="javascript:void(0)">一级菜单A_7</a>
  <a href="javascript:void(0)">一级菜单A_8</a>
  <a href="javascript:void(0)">一级菜单A_9</a>
 </ul>
 <h2 onClick="javascript:ShowMenu(this,10)"><a href="javascript:void(0)">+ 一级菜单A_11</a></h2>
 <ul class="no">
  <a href="javascript:void(0)">一级菜单A_0</a>
  <a href="javascript:void(0)">一级菜单A_1</a>
  <a href="javascript:void(0)">一级菜单A_2</a>
  <a href="javascript:void(0)">一级菜单A_3</a>
  <a href="javascript:void(0)">一级菜单A_4</a>
  <a href="javascript:void(0)">一级菜单A_5</a>
  <a href="javascript:void(0)">一级菜单A_6</a>
  <a href="javascript:void(0)">一级菜单A_7</a>
  <a href="javascript:void(0)">一级菜单A_8</a>
  <a href="javascript:void(0)">一级菜单A_9</a>
 </ul>
 <h2 onClick="javascript:ShowMenu(this,11)"><a href="javascript:void(0)">+ 一级菜单A_12</a></h2>
 <ul class="no">
  <a href="javascript:void(0)">一级菜单A_0</a>
  <a href="javascript:void(0)">一级菜单A_1</a>
  <a href="javascript:void(0)">一级菜单A_2</a>
  <a href="javascript:void(0)">一级菜单A_3</a>
  <a href="javascript:void(0)">一级菜单A_4</a>
  <a href="javascript:void(0)">一级菜单A_5</a>
  <a href="javascript:void(0)">一级菜单A_6</a>
  <a href="javascript:void(0)">一级菜单A_7</a>
  <a href="javascript:void(0)">一级菜单A_8</a>
  <a href="javascript:void(0)">一级菜单A_9</a>
 </ul>
 </span>
    
 <h1 onClick="javascript:ShowMenu(this,1)"><a href="javascript:void(0)">+ 二级菜单B</a></h1>
 <span class="no">
 <h2 onClick="javascript:ShowMenu(this,0)"><a href="javascript:void(0)">+ 二级菜单B_1</a></h2>
 <ul class="no">
  <a href="javascript:void(0)">二级菜单B_0</a>
  <a href="javascript:void(0)">二级菜单B_1</a>
  <a href="javascript:void(0)">二级菜单B_2</a>
  <a href="javascript:void(0)">二级菜单B_3</a>
  <a href="javascript:void(0)">二级菜单B_4</a>
  <a href="javascript:void(0)">二级菜单B_5</a>
  <a href="javascript:void(0)">二级菜单B_6</a>
  <a href="javascript:void(0)">二级菜单B_7</a>
  <a href="javascript:void(0)">二级菜单B_8</a>
  <a href="javascript:void(0)">二级菜单B_9</a>
 </ul>
 <h2 onClick="javascript:ShowMenu(this,1)"><a href="javascript:void(0)">+ 二级菜单B_2</a></h2>
 <ul class="no">
  <a href="javascript:void(0)">二级菜单B_0</a>
  <a href="javascript:void(0)">二级菜单B_1</a>
  <a href="javascript:void(0)">二级菜单B_2</a>
  <a href="javascript:void(0)">二级菜单B_3</a>
  <a href="javascript:void(0)">二级菜单B_4</a>
  <a href="javascript:void(0)">二级菜单B_5</a>
  <a href="javascript:void(0)">二级菜单B_6</a>
  <a href="javascript:void(0)">二级菜单B_7</a>
  <a href="javascript:void(0)">二级菜单B_8</a>
  <a href="javascript:void(0)">二级菜单B_9</a>
 </ul>
 </span>
  
 <h1 onClick="javascript:ShowMenu(this,2)"><a href="javascript:void(0)">+ 三级菜单C</a></h1>
 <span class="no">
 <h2 onClick="javascript:ShowMenu(this,0)"><a href="javascript:void(0)">+ 三级菜单C_1</a></h2>
 <ul class="no">
  <a href="javascript:void(0)">三级菜单C_0</a>
  <a href="javascript:void(0)">三级菜单C_1</a>
  <a href="javascript:void(0)">三级菜单C_2</a>
  <a href="javascript:void(0)">三级菜单C_3</a>
  <a href="javascript:void(0)">三级菜单C_4</a>
  <a href="javascript:void(0)">三级菜单C_5</a>
  <a href="javascript:void(0)">三级菜单C_6</a>
  <a href="javascript:void(0)">三级菜单C_7</a>
  <a href="javascript:void(0)">三级菜单C_8</a>
  <a href="javascript:void(0)">三级菜单C_9</a>
 </ul>
 <h2 onClick="javascript:ShowMenu(this,1)"><a href="javascript:void(0)">+ 三级菜单C_2</a></h2>
 <ul class="no">
  <a href="javascript:void(0)">三级菜单C_0</a>
  <a href="javascript:void(0)">三级菜单C_1</a>
  <a href="javascript:void(0)">三级菜单C_2</a>
  <a href="javascript:void(0)">三级菜单C_3</a>
  <a href="javascript:void(0)">三级菜单C_4</a>
  <a href="javascript:void(0)">三级菜单C_5</a>
  <a href="javascript:void(0)">三级菜单C_6</a>
  <a href="javascript:void(0)">三级菜单C_7</a>
  <a href="javascript:void(0)">三级菜单C_8</a>
  <a href="javascript:void(0)">三级菜单C_9</a>
 </ul>
 </span>
  
 <h1 onClick="javascript:ShowMenu(this,3)"><a href="javascript:void(0)">+ 四级菜单D</a></h1>
 <span class="no">
 <h2 onClick="javascript:ShowMenu(this,0)"><a href="javascript:void(0)">+ 四级菜单D_1</a></h2>
 <ul class="no">
  <a href="javascript:void(0)">四级菜单D_0</a>
  <a href="javascript:void(0)">四级菜单D_1</a>
  <a href="javascript:void(0)">四级菜单D_2</a>
  <a href="javascript:void(0)">四级菜单D_3</a>
  <a href="javascript:void(0)">四级菜单D_4</a>
  <a href="javascript:void(0)">四级菜单D_5</a>
  <a href="javascript:void(0)">四级菜单D_6</a>
  <a href="javascript:void(0)">四级菜单D_7</a>
  <a href="javascript:void(0)">四级菜单D_8</a>
  <a href="javascript:void(0)">四级菜单D_9</a>
 </ul>
 <h2 onClick="javascript:ShowMenu(this,1)"><a href="javascript:void(0)">+ 四级菜单D_2</a></h2>
 <ul class="no">
  <a href="javascript:void(0)">四级菜单D_0</a>
  <a href="javascript:void(0)">四级菜单D_1</a>
  <a href="javascript:void(0)">四级菜单D_2</a>
  <a href="javascript:void(0)">四级菜单D_3</a>
  <a href="javascript:void(0)">四级菜单D_4</a>
  <a href="javascript:void(0)">四级菜单D_5</a>
  <a href="javascript:void(0)">四级菜单D_6</a>
  <a href="javascript:void(0)">四级菜单D_7</a>
  <a href="javascript:void(0)">四级菜单D_8</a>
  <a href="javascript:void(0)">四级菜单D_9</a>
 </ul>
 </span>
</div>
</body>
</html>
로그인 후 복사

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

관련 라벨：
JS折叠菜单 JS点击展开收缩 JS折叠效果
원천：php.cn
이전 기사：jquery는 먼저 페이드 아웃한 다음 접는 애니메이션 효과를 구현합니다._jquery 다음 기사：C_javascript 스킬의 문자열 클래스 사용 요약
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
모바일 보기에서 사용자가 링크를 클릭할 때 이 탐색 표시줄을 어떻게 닫을 수 있나요? 사용자가 웹 사이트를 탐색하기 위해 링크를 클릭하면 탐색 표시줄이 닫히지 않습니까? 내비게이션 바를 닫기 위해 각 링크에 클릭 이벤트 리스너를 추가해 보았지만 작...
에서 2024-04-06 19:23:03
0
1
411
숨겨진 측면 패널 표시: 선택됨 애니메이션 햄버거 메뉴를 통해 보기로 전환할 수 있는 탐색 메뉴를 측면 패널에 갖고 싶습니다. JS 없이 CSS만 사용하여 만들고 싶습니다. :checked 의사...
에서 2024-04-06 15:49:33
0
1
319
GitHub 페이지에서 CSS 및 JS를 보는 데 문제가 있지만 VS Code에서는 잘 작동합니다. 저는 프로젝트 페이지 작업 중이며 CSS 및 JS 파일이 포함된 템플릿을 사용하고 있습니다. VisualStudioCode에서 코드를 작성했는데 내 컴퓨터에서 로...
에서 2024-03-30 22:12:20
0
1
314
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿