jquery实现的Accordion折叠面板效果代码

2024-12-01 17:59:45

本文实例讲述了jquery实现的Accordion折叠面板效果代码。分享给大家供大家参考。具体如下：

这是一款Accordion折叠面板，折叠菜单代码，简单Accordion效果，采用CSS与jQuery实现，鼠标点击后展开，再次点击后折叠起来。是网上很常用的手风琴效果。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/jquery-Simple-Accordion-style-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>Simple Accordion with CSS & jQuery</title>
<style type="text/css">
html {
 overflow-Y: scroll;
}
body {
 font: 10px normal Arial, Helvetica, sans-serif;
 margin: 0;
 padding: 0;
 line-height: 1.7em;
}
*, * focus {
 outline: none;
 margin: 0;
 padding: 0;
}
.container {
 width: 500px;
 margin: 0 auto;
}
h1 {
 font: 4em normal Georgia, 'Times New Roman', Times, serif;
 text-align:center;
 padding: 20px 0;
 color: #aaa;
}
h1 span { color: #666; }
h1 small{
 font: 0.3em normal Verdana, Arial, Helvetica, sans-serif;
 text-transform:uppercase;
 letter-spacing: 0.5em;
 display: block;
 color: #666;
}
h2.acc_trigger {
 padding: 0; margin: 0 0 5px 0;
 background: url(images/h2_trigger_a.gif) no-repeat;
 height: 46px; line-height: 46px;
 width: 500px;
 font-size: 2em;
 font-weight: normal;
 float: left;
}
h2.acc_trigger a {
 color: #fff;
 text-decoration: none;
 display: block;
 padding: 0 0 0 50px;
}
h2.acc_trigger a:hover {
 color: #ccc;
}
h2.active {background-position: left bottom;}
.acc_container {
 margin: 0 0 5px; padding: 0;
 overflow: hidden;
 font-size: 1.2em;
 width: 500px;
 clear: both;
 background: #f0f0f0;
 border: 1px solid #d6d6d6;
 -webkit-border-bottom-right-radius: 5px;
 -webkit-border-bottom-left-radius: 5px;
 -moz-border-radius-bottomright: 5px;
 -moz-border-radius-bottomleft: 5px;
 border-bottom-right-radius: 5px;
 border-bottom-left-radius: 5px;
}
.acc_container .block {
 padding: 20px;
}
.acc_container .block p {
 padding: 5px 0;
 margin: 5px 0;
}
.acc_container h3 {
 font: 2.5em normal Georgia, "Times New Roman", Times, serif;
 margin: 0 0 10px;
 padding: 0 0 5px 0;
 border-bottom: 1px dashed #ccc;
}
.acc_container img {
 float: left;
 margin: 10px 15px 15px 0;
 padding: 5px;
 background: #ddd;
 border: 1px solid #ccc;
}
</style>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//Set default open/close settings
$('.acc_container').hide(); //Hide/close all containers
$('.acc_trigger:first').addClass('active').next().show(); //Add "active" class to first trigger, then show/open the immediate next container
//On Click
$('.acc_trigger').click(function(){
 if( $(this).next().is(':hidden') ) { //If immediate next container is closed...
  $('.acc_trigger').removeClass('active').next().slideUp(); //Remove all .acc_trigger classes and slide up the immediate next container
  $(this).toggleClass('active').next().slideDown(); //Add .acc_trigger class to clicked trigger and slide down the immediate next container
 }
 return false; //Prevent the browser jump to the link anchor
});
});
</script>
</head>
<body>
<h1>Simple Accordion with <span>CSS & jQuery</span><small>by Soh Tanaka | <a href="#">View Tutorial</a></small></h1>
<div class="container">
 <h2 class="acc_trigger"><a href="#">Web Design & Development</a></h2>
 <div class="acc_container">
  <div class="block">
   <h3>Need a Website?</h3>
   <a href="#"><img src="img1.gif" alt="" /></a>
   <p>Consequat te olim letalis premo ad hos olim odio olim indoles ut venio iusto. Euismod, sagaciter diam neque antehabeo blandit, jumentum transverbero luptatum. Lenis vel diam praemitto molior facilisi facilisi suscipere abico, ludus, at. Wisi suscipere nisl ad capto comis esse, autem genitus. Feugiat immitto ullamcorper hos luptatum gilvus eum. Delenit patria nunc os pneum acsi nulla magna singularis proprius autem exerci accumsan. </p>
   <p>Praesent duis vel similis usitas camur, nostrud eros opes verto epulae feugiat ad. Suscipit modo magna letalis amet et tego accumsan facilisi, meus. Vindico luptatum blandit ulciscor mos caecus praesent sed meus velit si quis lobortis praemitto, uxor. </p>
  </div>
 </div>
 <h2 class="acc_trigger"><a href="#">Logo / Corporate Identity</a></h2>
 <div class="acc_container">
  <div class="block">
   <h3>Need a Logo?</h3>
   <a href="#"><img src="img2.gif" alt="" /></a>
   <p>Consequat te olim letalis premo ad hos olim odio olim indoles ut venio iusto. Euismod, sagaciter diam neque antehabeo blandit, jumentum transverbero luptatum. Lenis vel diam praemitto molior facilisi facilisi suscipere abico, ludus, at. Wisi suscipere nisl ad capto comis esse, autem genitus. Feugiat immitto ullamcorper hos luptatum gilvus eum. Delenit patria nunc os pneum acsi nulla magna singularis proprius autem exerci accumsan. </p>
   <p>Praesent duis vel similis usitas camur, nostrud eros opes verto epulae feugiat ad. Suscipit modo magna letalis amet et tego accumsan facilisi, meus. Vindico luptatum blandit ulciscor mos caecus praesent sed meus velit si quis lobortis praemitto, uxor. </p>
  </div>
 </div>
 <h2 class="acc_trigger"><a href="#">Seach Engine Optimization</a></h2>
 <div class="acc_container">
  <div class="block">
   <h3>Need to be Heard?</h3>
   <a href="#"><img src="img3.gif" alt="" /></a>
   <p>Consequat te olim letalis premo ad hos olim odio olim indoles ut venio iusto. Euismod, sagaciter diam neque antehabeo blandit, jumentum transverbero luptatum. Lenis vel diam praemitto molior facilisi facilisi suscipere abico, ludus, at. Wisi suscipere nisl ad capto comis esse, autem genitus. Feugiat immitto ullamcorper hos luptatum gilvus eum. Delenit patria nunc os pneum acsi nulla magna singularis proprius autem exerci accumsan. </p>
   <p>Praesent duis vel similis usitas camur, nostrud eros opes verto epulae feugiat ad. Suscipit modo magna letalis amet et tego accumsan facilisi, meus. Vindico luptatum blandit ulciscor mos caecus praesent sed meus velit si quis lobortis praemitto, uxor. </p>
  </div>
 </div>
 <h2 class="acc_trigger"><a href="#">eCommerce</a></h2>
 <div class="acc_container">
  <div class="block">
   <h3>Have Product to Sell?</h3>
   <a href="#"><img src="img4.gif" alt="" /></a>
   <p>Consequat te olim letalis premo ad hos olim odio olim indoles ut venio iusto. Euismod, sagaciter diam neque antehabeo blandit, jumentum transverbero luptatum. Lenis vel diam praemitto molior facilisi facilisi suscipere abico, ludus, at. Wisi suscipere nisl ad capto comis esse, autem genitus. Feugiat immitto ullamcorper hos luptatum gilvus eum. Delenit patria nunc os pneum acsi nulla magna singularis proprius autem exerci accumsan. </p>
   <p>Praesent duis vel similis usitas camur, nostrud eros opes verto epulae feugiat ad. Suscipit modo magna letalis amet et tego accumsan facilisi, meus. Vindico luptatum blandit ulciscor mos caecus praesent sed meus velit si quis lobortis praemitto, uxor. </p>
  </div>
 </div>
</div>
</body>
</html>

希望本文所述对大家的jquery程序设计有所帮助。

基于jQuery实现Accordion手风琴自定义插件

目前网上有很多各种各样的手风琴插件,但是没有一个完整实现了的侧菜单,今天写了一个可以无限子节点的手风琴侧菜单,有需要的可以参考一下,有什么好的想法可以留言.(没有经过彻底测试,不过问题应该不大) 下面老规矩,直接贴代码: (function ($) { 'use strict'; var defaults = { url: null, param: {}, data: {}, fill: true, level_space: 15, onitemclick: null, style: { hea
jQuery实现的简单折叠菜单(折叠面板)效果代码

本文实例讲述了jQuery实现的简单折叠菜单(折叠面板)效果代码.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现的折叠菜单,可展开一些内容,实际上称它为一个面板比较好,是一个折叠面板,使用了jQuery1.6.2插件. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-simple-toggle-zd-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD X
Mootools 1.2 手风琴（Accordion）教程

创建和配置一个基本的手风琴很简单,但是你一定要认真看完全文,因为更多的高级选项可能有一些复杂. 基础知识创建一个新的手风琴要创建一个新的手风琴,你需要选择一些成对的元素--包含标题和内容.因此,首先,需要给每一个标题和每一个内容块分别指定一个css类名: 参考代码: 复制代码代码如下: <h3 class="togglers">Toggle 1</h3> <p class="elements">Here is the con
jQuery EasyUI Accordion可伸缩面板组件使用详解

Accordion 可伸缩面板组件,基于panel,示例如下: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <script type="text/javascript" src="easyui/jquery.min.js"></script> <script type=
jquery实现简单合拢与展开网页面板的方法

本文实例讲述了jquery实现简单合拢与展开网页面板的方法.分享给大家供大家参考.具体如下: 这是一款网页上常见的合拢(收缩).伸展面板代码,使用了jQuery插件,代码更加简化,点击面板的标题栏即可折叠.或展开这个层,是网上很流行的效果,由此可扩展出的功能还真挺多,只要动脑筋,一定能做出来. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-simple-hidden-show-web-table-codes/ 具体代码如下: <!
jQuery EasyUI API 中文文档 - Panel面板

用$.fn.panel.defaults重写defaults.用法示例创建Panel 1. 经由标记创建Panel 从标记创建Panel更容易.把 'easyui-panel' 类添加到<div/>标记. 复制代码代码如下: <div id="p" class="easyui-panel" title="My Panel" style="width:500px;height:150px;padding:10px;b
jQuery实现可展开合拢的手风琴面板菜单

本文实例讲述了jQuery实现可展开合拢的手风琴面板菜单.分享给大家供大家参考.具体如下: 这是一款大家都常见的折叠菜单,手风琴折叠面板,会展开和合拢,带点Flash动画效果,修改时请注意: slideUp : 通过高度变化(向上减小)来动态地隐藏所有匹配的元素,在隐藏完成后可选地触发一个回调函数.这个动画效果只调整元素的高度,可以使匹配的元素以"滑动"的方式隐藏起来. slideDown: 通过高度变化(向下增大)来动态地显示所有匹配的元素,在显示完成后可选地触发一个回调函数.这个动
jQuery Easyui使用(一)之可折叠面板的布局手风琴菜单

先给大家看下效果图,效果图展示如下: 关键代码如下所示: <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>首页</title> &l
学习ExtJS accordion布局

一.Accordion布局由类Ext.layout.Accordion定义,表示可折叠的布局,点击每一个子元素的头部名称或右边的按钮,则会展开该面板,并收缩其它已经展开的面板. layoutConfig:true表示在执行展开折叠时启动动画效果,默认值为false. 二.应用举例复制代码代码如下: Ext.onReady(function(){ var _panel = new Ext.Panel({ title:"人员信息", renderTo:Ext.getBody(), fr
ajaxToolkit:AccordionPane演示与应用实例

一个展开收合的ajaxToolkit:AccordionPane控件.Insus.NET在专案有用到它. 因为它可以节省显示空间.不过有点不足,就是用户刚开始使用,需要记得每个AccordionPane内容.或是需要使用一个显而可见的名字.下面的演示中,只是两个收合AccordionPane,如果多个的话,就会有上面提及的问题. 下面是HTML:ajaxToolkit:Accordion 复制代码代码如下: <ajaxToolkit:Accordion ID="Accordion1&qu

jquery实现的Accordion折叠面板效果代码

相关推荐

随机推荐