jquery實現(xiàn)的Accordion折疊面板效果代碼
更新時間：2015年09月02日 17:17:25 作者：企鵝
這篇文章主要介紹了jquery實現(xiàn)的Accordion折疊面板效果代碼,通過jquery鼠標(biāo)click事件操作頁面元素樣式動態(tài)變換實現(xiàn)手風(fēng)琴折疊效果,具有一定參考借鑒價值,需要的朋友可以參考下
本文實例講述了jquery實現(xiàn)的Accordion折疊面板效果代碼。分享給大家供大家參考。具體如下：
這是一款A(yù)ccordion折疊面板，折疊菜單代碼，簡單Accordion效果，采用CSS與jQuery實現(xiàn)，鼠標(biāo)點(diǎn)擊后展開，再次點(diǎn)擊后折疊起來。是網(wǎng)上很常用的手風(fēng)琴效果。
運(yùn)行效果截圖如下：
在線演示地址如下：
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程序設(shè)計有所幫助。
相關(guān)文章
jquery實現(xiàn)垂直手風(fēng)琴導(dǎo)航欄
這篇文章主要為大家詳細(xì)介紹了jquery實現(xiàn)垂直手風(fēng)琴導(dǎo)航欄，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-02-02
這篇文章主要介紹了基于jquery實現(xiàn)最簡單的選項卡切換效果的相關(guān)資料，具有一定的參考價值，感興趣的朋友可以參考一下2016-05-05
基于jQuery的圖片大小自動適應(yīng)實現(xiàn)代碼
這個和以前弄的圖片遠(yuǎn)處放大有許多相同的地方，比如圖片預(yù)加載、有限容器顯示無限大圖片。2010-11-11
jQuery 循環(huán)遍歷改變a標(biāo)簽的href(實例講解)
下面小編就為大家?guī)硪黄猨Query 循環(huán)遍歷改變a標(biāo)簽的href(實例講解)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
這篇文章主要介紹了使用struts2+jquery如何驗證注冊用戶是否存在,需要的朋友可以參考下2014-04-04
juqery 學(xué)習(xí)之六 CSS--css、位置、寬高
juqery 學(xué)習(xí)之六 CSS--css、位置、寬高，需要的朋友可以參考下。2011-02-02
這篇文章主要介紹了jQuery中click事件用法,以實例形式分析了click事件的具體功能及應(yīng)用技巧,非常具有實用價值,需要的朋友可以參考下2014-12-12
jQuery Validate 插件為表單提供了強(qiáng)大的驗證功能，讓客戶端表單驗證變得更簡單，同時提供了大量的定制選項，滿足應(yīng)用程序各種需求。接下來通過本文給大家介紹jQuery.Validate表單驗證插件的使用示例，一起看看吧2017-01-01
這篇文章主要為大家詳細(xì)介紹了jQuery焦點(diǎn)圖左右轉(zhuǎn)換效果,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
jQuery時間驗證和轉(zhuǎn)換為標(biāo)準(zhǔn)格式的時間格式
本篇文章主要介紹了jQuery時間驗證和轉(zhuǎn)換為標(biāo)準(zhǔn)格式的時間示例代碼，具有一定的參考價值，有興趣的可以了解一下。2017-03-03