jquery实现的Accordion折叠面板效果代码
网络编程 2021-07-04 21:03www.168986.cn编程入门
这篇文章主要介绍了jquery实现的Aordion折叠面板效果代码,通过jquery鼠标click事件操作页面元素样式动态变换实现手风琴折叠效果,具有一定参考借鉴价值,需要的朋友可以参考下
本文实例讲述了jquery实现的Aordion折叠面板效果代码。分享给大家供大家参考。具体如下
这是一款Aordion折叠面板，折叠菜单代码，简单Aordion效果，采用CSS与jQuery实现，鼠标点击后展开，点击后折叠起来。是网上很常用的手风琴效果。
运行效果截图如下
在线演示地址如下
具体代码如下
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://.w3./TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://.w3./1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Simple Aordion 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 Geia, '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.a_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.a_trigger a {
color: #fff;
text-decoration: none;
display: block;
padding: 0 0 0 50px;
}
h2.a_trigger a:hover {
color: #c;
}
h2.active {background-position: left bottom;}
.a_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;
}
.a_container .block {
padding: 20px;
}
.a_container .block p {
padding: 5px 0;
margin: 5px 0;
}
.a_container h3 {
font: 2.5em normal Geia, "Times New Roman", Times, serif;
margin: 0 0 10px;
padding: 0 0 5px 0;
border-bottom: 1px dashed #c;
}
.a_container img {
float: left;
margin: 10px 15px 15px 0;
padding: 5px;
background: #ddd;
border: 1px solid #c;
}
</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
$('.a_container').hide(); //Hide/close all containers
$('.a_trigger:first').addClass('active').next().show(); //Add "active" class to first trigger, then show/open the immediate next container
//On Click
$('.a_trigger').click(function(){
if( $(this).next().is(':hidden') ) { //If immediate next container is closed...
$('.a_trigger').removeClass('active').next().slideUp(); //Remove all .a_trigger classes and slide up the immediate next container
$(this).toggleClass('active').next().slideDown(); //Add .a_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 Aordion with <span>CSS & jQuery</span><small>by Soh Tanaka | <a href="#">View Tutorial</a></small></h1>
<div class="container">
<h2 class="a_trigger"><a href="#">Web Design & Development</a></h2>
<div class="a_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 is esse, autem genitus. Feugiat immitto ullamcorper hos luptatum gilvus eum. Delenit patria nunc os pneum acsi nulla magna singularis proprius autem exerci aumsan. </p>
<p>Praesent duis vel similis usitas camur, nostrud eros opes verto epulae feugiat ad. Suscipit modo magna letalis amet et tego aumsan facilisi, meus. Vindico luptatum blandit ulciscor mos caecus praesent sed meus velit si quis lobortis praemitto, uxor. </p>
</div>
</div>
<h2 class="a_trigger"><a href="#">Logo / Corporate Identity</a></h2>
<div class="a_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 is esse, autem genitus. Feugiat immitto ullamcorper hos luptatum gilvus eum. Delenit patria nunc os pneum acsi nulla magna singularis proprius autem exerci aumsan. </p>
<p>Praesent duis vel similis usitas camur, nostrud eros opes verto epulae feugiat ad. Suscipit modo magna letalis amet et tego aumsan facilisi, meus. Vindico luptatum blandit ulciscor mos caecus praesent sed meus velit si quis lobortis praemitto, uxor. </p>
</div>
</div>
<h2 class="a_trigger"><a href="#">Seach Engine Optimization</a></h2>
<div class="a_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 is esse, autem genitus. Feugiat immitto ullamcorper hos luptatum gilvus eum. Delenit patria nunc os pneum acsi nulla magna singularis proprius autem exerci aumsan. </p>
<p>Praesent duis vel similis usitas camur, nostrud eros opes verto epulae feugiat ad. Suscipit modo magna letalis amet et tego aumsan facilisi, meus. Vindico luptatum blandit ulciscor mos caecus praesent sed meus velit si quis lobortis praemitto, uxor. </p>
</div>
</div>
<h2 class="a_trigger"><a href="#">eCommerce</a></h2>
<div class="a_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 is esse, autem genitus. Feugiat immitto ullamcorper hos luptatum gilvus eum. Delenit patria nunc os pneum acsi nulla magna singularis proprius autem exerci aumsan. </p>
<p>Praesent duis vel similis usitas camur, nostrud eros opes verto epulae feugiat ad. Suscipit modo magna letalis amet et tego aumsan facilisi, meus. Vindico luptatum blandit ulciscor mos caecus praesent sed meus velit si quis lobortis praemitto, uxor. </p>
</div>
</div>
</div>
</body>
</html>
希望本文所述对大家的jquery程序设计有所帮助。
编程语言
- 如何快速学会编程 如何快速学会ug编程
- 免费学编程的app 推荐12个免费学编程的好网站
- 电脑怎么编程：电脑怎么编程网咯游戏菜单图标
- 如何写代码新手教学 如何写代码新手教学手机
- 基础编程入门教程视频 基础编程入门教程视频华
- 编程演示：编程演示浦丰投针过程
- 乐高编程加盟 乐高积木编程加盟
- 跟我学plc编程 plc编程自学入门视频教程
- ug编程成航林总 ug编程实战视频
- 孩子学编程的好处和坏处
- 初学者学编程该从哪里开始 新手学编程从哪里入
- 慢走丝编程 慢走丝编程难学吗
- 国内十强少儿编程机构 中国少儿编程机构十强有
- 成人计算机速成培训班 成人计算机速成培训班办
- 孩子学编程网上课程哪家好 儿童学编程比较好的
- 代码编程教学入门软件 代码编程教程