jQuery로 구현된 클래식 수직 텔레스코픽 메뉴 효과 코드-JS 튜토리얼-php.cn

jQuery로 구현된 클래식 수직 텔레스코픽 메뉴 효과 코드

PHPz

풀어 주다： 2018-09-28 17:46:49

앞으로

1155명이 탐색했습니다.

이 기사에서는 주로 jQuery로 구현된 고전적인 수직 망원 메뉴 효과 코드를 소개합니다. jQuery는 마우스 이벤트에 반응하고 페이지 요소를 탐색하여 망원 메뉴 효과를 구현합니다. 매우 간단하고 실용적입니다. .자세한 내용은 다음과 같습니다.

jquery1.3.2를 사용하여 만든 세로 개폐식 메뉴입니다. 메인 메뉴를 클릭할 때마다 해당 보조 메뉴가 열리고, 다시 클릭하면 닫힙니다. 효과가 아주 좋습니다.

실행 중인 효과의 스크린샷은 다음과 같습니다.

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

http: //demo.jb51.net/ js/2015/jquery-jd-v-show-menu-demo-codes/

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery1.3.2竖向的伸缩菜单</title>
<script type="text/javascript" src="jquery1.3.2.js"></script>
<script type="text/javascript">
  $(document).ready(function(){
  $("#wenzhang>dd>dl>dd").hide();
  $.each($("#wenzhang>dd>dl>dt"), function(){
   $(this).click(function(){
    $("#wenzhang>dd>dl>dd ").not($(this).next()).slideUp();
    $(this).next().slideToggle(500);
    //$(this).next().toggle();
   });
  });
  });
 </script>
<style type="text/css">
dl,dd,dt,ul,li{ margin:0; padding:0; list-style:none; color:#333;}
#wenzhang{ width:300px; text-align:center; font-size:12px;border-left:1px solid #dedede;border-right:1px solid #dedede; border-bottom:1px solid #dedede;}
#wenzhang dd dl dt{ border-top:1px solid #dedede; background:#f2f2f2; height:25px; line-height:25px; font-weight:bold;}
#wenzhang ul{ background:#f9f9f9; }
#wenzhang li{ border-top:1px solid #efefef; line-height:25px;}
</style>
</head>
<body>
 <dl id="wenzhang">
 <dd>
 <dl>
  <dt>脚本下载</dt>
  <dd>
  <ul>
  <li>ASP源码下载</li>
  <li>PHP源码下载</li>
  <li>ASP.net源码下载</li>
  </ul>
  </dd>
 </dl>
 </dd>
 <dd>
 <dl>
  <dt>网页特效</dt>
  <dd>
  <ul>
  <li>菜单导航</li>
  <li>层和布局洋</li>
  <li>表单及按钮</li>
  </ul>
  </dd>
 </dl>
 </dd> 
 <dd>
 <dl>
  <dt>最新更新</dt>
  <dd>
  <ul>
   <li>最新更新</li>
   <li>下载排行</li>
   <li>推荐下载</li>
  </ul>
  </dd>
 </dl>
 </dd> 
 </dl>
 <p>如果初次运行，请刷新一次页面，调用了本站的jQuery，可能加载需要些时间。</p>
</body>
</html>

로그인 후 복사

위 내용은 이 장의 전체 내용이며, 더 많은 관련 튜토리얼을 보려면 jQuery 비디오 튜토리얼을 방문하세요!