jQuery_jquery를 기반으로 아코디언 기반 탐색 메뉴 확장 및 축소 구현-JS 튜토리얼-php.cn

jQuery_jquery를 기반으로 아코디언 기반 탐색 메뉴 확장 및 축소 구현

WBOY

풀어 주다： 2016-05-16 15:17:09

원래의

1259명이 탐색했습니다.

이 장에서는 아코디언 모드에서 탐색 메뉴 확장 및 축소 효과를 구현하는 코드 예제를 공유합니다.

코드 예시는 다음과 같습니다.

代码实例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312">
<meta name="author" content="http://www.jb51.net/" />
<title>脚本之家</title>
<style>
dl{width:150px;}
dl,dd{margin:0;}
dt{
 background:gray;
 font-size:14px;
 padding:2px;
 margin:2px;
}
dt{color:#FFF;}
dd a{
 color:#000;
 font-size:12px;
}
ul{
 list-style:none;
 padding:2px;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
$(document).ready(function(){
 $("dd:not(:first)").hide();
 $("dt a").click(function(){
  $("dd:visible").slideUp("slow");
  $(this).parent().next().slideDown("slow");
  return false;
 });
});
</script>
</head>
<body>
<dl>
 <dt><a href="#">脚本之家一</a></dt>
 <dd>
  <ul>
   <li><a href="#">div教程</a></li>
   <li><a href="#">css教程</a></li>
   <li><a href="#">jquery教程</a></li>
  </ul>
 </dd>
 <dt><a href="#">脚本之家二</a></dt>
 <dd>
  <ul>
   <li><a href="#">正则教程</a></li>
   <li><a href="#">脚本之家</a></li>
  </ul>
 </dd>
 <dt><a href="#">脚本之家三</a></dt>
 <dd>
  <ul>
   <li><a href="#">ajax教程</a></li>
   <li><a href="#">softwhy.com</a></li>
   <li><a href="#">js教程</a></li>
  </ul>
 </dd>
</dl>
</body>
</html>

로그인 후 복사

위 코드는 우리의 요구 사항을 충족합니다. 구현 프로세스를 소개합니다.

1. 코드 주석:

(1).$(document).ready(function(){}), 문서 구조가 완전히 로드되면 함수의 코드를 실행합니다.
(2).$("dd:not(:first)").hide(), 첫 번째 dd 요소를 제외한 모든 dd 요소가 숨겨집니다. 즉, 첫 번째 탐색 메뉴의 하위 메뉴가 확장되고 나머지는 숨겨집니다. .
(3).$("dt a").click(function(){}), dt 요소 아래에 a 요소에 대한 클릭 이벤트 처리 함수를 등록합니다.
(4).$("dd:visible").slideUp("slow"), 표시된 모든 dd 요소는 애니메이션을 통해 축소되고 숨겨집니다.
(5).$(this).parent().next().slideDown("slow"), 현재 a 요소에 연결된 상위 요소는 dt 요소이고, dt 요소의 다음 요소는 보조 메뉴입니다. dd 요소. 이 메뉴는 애니메이션으로 확장됩니다.
(6).return false, 이는 링크가 점프하는 것을 방지하는 데 매우 중요합니다.

위 내용은 jQuery를 기반으로 아코디언 모드에서 탐색 메뉴를 확장 및 축소하는 방법을 공유한 내용입니다. 모든 분들께 도움이 되기를 바랍니다.