cari

Rumah >hujung hadapan web >tutorial js >Menu lipat mudah (panel lipat) kod kesan yang dilaksanakan oleh jQuery_jquery

Menu lipat mudah (panel lipat) kod kesan yang dilaksanakan oleh jQuery_jquery

WBOY
WBOYasal
2016-05-16 15:39:052308semak imbas

Contoh dalam artikel ini menerangkan kod kesan menu lipatan mudah (panel lipat) yang dilaksanakan oleh jQuery. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:

Ini ialah menu lipat berdasarkan jQuery yang boleh mengembangkan beberapa kandungan Malah, lebih baik memanggilnya sebagai panel lipat dan menggunakan pemalam jQuery1.6.2.

Tangkapan skrin kesan berjalan adalah seperti berikut:

Alamat demo dalam talian adalah seperti berikut:

http://demo.jb51.net/js/2015/jquery-simple-toggle-zd-menu-codes/

Kod khusus adalah seperti berikut: 

<!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>
<title>jQuery 折叠菜单 by Sam Zhang</title>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<style type="text/css">
* { margin:0px; padding:0px; }
body { background:transparent url('images/bg.gif') repeat scroll left top;font-size:14px; }
ul, li, p, h1, h2, h3, div, label, input, form { list-style:none; padding:0px; margin:0px; }
#header { width:600px; margin:20px auto 0; color:#ffffff; background:transparent url('images/header1.jpg') repeat-x scroll left top; height:90px; line-height:90px; font-size:20px; overflow:hidden; }
#header p { padding-left:15px; font-weight:bold; }
#header p span.date { float:right; padding-right:15px; font-size:14px; padding-top:10px; font-weight:normal; }
.content { width:596px; _height:430px; min-height:430px; margin:0 auto; border:2px solid #AAAA00; border-top:none; background-color:#FFFFFF; overflow:hidden; }
.toggle { width:450px; margin:20px auto; }
.toggle dl dt { background:#F4FFF4 url('images/bg_toggle_up.gif') no-repeat scroll 8px 14px; height:40px; width:450px; line-height:40px; font-size:16px; font-weight:bold; color:#006600; cursor:pointer; margin:8px 0; padding-left:25px; display:block; }
.toggle dl dt.current { background:#F4FFF4 url('images/bg_toggle_down.gif') no-repeat scroll 8px 14px; }
.toggle dl dd { padding-left:10px; line-height:24px; }
.toggle dl dd h2 { font-size:15px; }
.toggle dl dd ul { padding-bottom:12px; }
.toggle dl dd ul li { list-style:decimal inside none; }
</style>
  <script type="text/javascript"> 
   $(function(){
    $(".toggle dl dd").hide();
    $(".toggle dl dt").click(function(){
     $(".toggle dl dd").not($(this).next()).hide();
     $(".toggle dl dt").not($(this).next()).removeClass("current");
     $(this).next().slideToggle(500);
     $(this).toggleClass("current");
     });
    });
  </script>
  </head>
  <body>
<div id="header">
  <p><span class="date">时间：2010/8/3</span>jQuery 折叠菜单<span style="font-size:14px;padding:10px 0 0 5px;">By Sam Zhang</span> 
 </div>
<div class="content">
  <div class="toggle">
 <dl>
  <dt>web 前端开发工程师（工作地点:上海、广州）</dt>
  <dd>
 <h2>工作职责：</h2>
 <ul>
   <li>简单分析用户数据，整理用户需求导向；</li>
   <li>对在用户浏览器端的最终视觉呈现负责；</li>
   <li>和后台工程师一起研讨技术实现方案，制定服务接口等；</li>
  </ul>
 <h2>职位要求：</h2>
 <ul>
   <li>本科以上学历，习惯阅读英文原版技术文档和书籍；</li>
   <li>对可用性、可访问性等相关知识有深刻的认识和实践经验；</li>
   <li>掌握至少一门非前端脚本开发语言（如PHP/Python等）；</li>
  </ul>
 </dd>
  <dt>web 前端开发工程师（工作地点:上海、广州）</dt>
  <dd>
 <h2>工作职责：</h2>
 <ul>
   <li>对在用户浏览器端的最终视觉呈现负责；</li>
   <li>持续的优化前端体验和页面响应速度；</li>
   <li>和后台工程师一起研讨技术实现方案，制定服务接口等；</li>
  </ul>
 <h2>职位要求：</h2>
 <ul>
   <li>本科以上学历，习惯阅读英文原版技术文档和书籍；</li>
   <li>熟悉至少一种JS框架（如YUI/JQuery等），我们目前主要使用YUI；</li>
   <li>掌握至少一门非前端脚本开发语言（如PHP/Python等）；</li>
  </ul>
 </dd>
  <dt>web 前端开发工程师（工作地点:上海、广州）</dt>
  <dd>
 <h2>工作职责：</h2>
 <ul>
   <li>简单分析用户数据，整理用户需求导向；</li>
   <li>对在用户浏览器端的最终视觉呈现负责；</li>
   <li>使用HTML/CSS/Javascript开发符合W3C标准的网站前端页面；</li>
  </ul>
 <h2>职位要求：</h2>
 <ul>
   <li>精通XHTML/CSS/Javascript等前端技术，兼容多种浏览器的代码；</li>
   <li>熟悉至少一种JS框架（如YUI/JQuery等），我们目前主要使用YUI；</li>
   <li>掌握至少一门非前端脚本开发语言（如PHP/Python等）；</li>
  </ul>
 </dd>
  </dl>
 </div>
 </div>
</body>
</html>

Saya harap artikel ini akan membantu pengaturcaraan jQuery semua orang.

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：js pelaksanaan kesan penukaran tab kemahiran example_javascriptArtikel seterusnya：js pelaksanaan kesan penukaran tab kemahiran example_javascript

Artikel berkaitan

Lihat lagi