以下是 jQuery手风琴插件rlaccordion特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html lang="en">
<!--[if IE 7]> <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<head>
<meta charset="gb2312">
<title>jQuery手风琴插件rlaccordion</title>
<meta name="author" content="Rodrigo Ludgero" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <!-- inform the browser to set the window width to the device’s width -->
<link rel="shortcut icon" href="favicon.ico" />
<link rel="stylesheet" href="css/styles.css" />
<script src="js/jquery.min.js"></script>
<script src="js/html5shiv.js"></script>
<script src="js/rlaccordion.js"></script>
<script src="js/scripts.js"></script>
<!-- end of javacripts -->
</head>
<body>
<div id="wrapper">
<main class="main-wrapper">
<h2>Default Settings</h2>
<div id="first">
<h3>Accordion One</h3>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto illo velit temporibus aliquam eius dolorem dolor laudantium quidem porro obcaecati nesciunt ducimus doloribus molestiae ad praesentium reiciendis enim eligendi fugit!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio quis delectus ducimus quibusdam ex totam natus sint nemo nam possimus explicabo labore architecto magnam accusantium veritatis tenetur repudiandae ab laboriosam?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis molestiae molestias atque asperiores illum nisi saepe placeat deleniti commodi dolore cupiditate quas. Ipsum odio quibusdam nemo est ducimus ea nesciunt?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga eligendi ex aperiam facilis alias! Quaerat asperiores quia molestias laboriosam commodi aspernatur dolorum nostrum impedit perspiciatis cupiditate quas distinctio earum dignissimos.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi laboriosam voluptates eum vero iste enim quas a nulla consequuntur quasi. Dolorum minima corporis molestias blanditiis ducimus obcaecati necessitatibus excepturi magnam?</p>
</div>
<h3>Accordion Two</h3>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto illo velit temporibus aliquam eius dolorem dolor laudantium quidem porro obcaecati nesciunt ducimus doloribus molestiae ad praesentium reiciendis enim eligendi fugit!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio quis delectus ducimus quibusdam ex totam natus sint nemo nam possimus explicabo labore architecto magnam accusantium veritatis tenetur repudiandae ab laboriosam?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis molestiae molestias atque asperiores illum nisi saepe placeat deleniti commodi dolore cupiditate quas. Ipsum odio quibusdam nemo est ducimus ea nesciunt?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga eligendi ex aperiam facilis alias! Quaerat asperiores quia molestias laboriosam commodi aspernatur dolorum nostrum impedit perspiciatis cupiditate quas distinctio earum dignissimos.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi laboriosam voluptates eum vero iste enim quas a nulla consequuntur quasi. Dolorum minima corporis molestias blanditiis ducimus obcaecati necessitatibus excepturi magnam?</p>
</div>
<h3>Accordion Three</h3>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto illo velit temporibus aliquam eius dolorem dolor laudantium quidem porro obcaecati nesciunt ducimus doloribus molestiae ad praesentium reiciendis enim eligendi fugit!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio quis delectus ducimus quibusdam ex totam natus sint nemo nam possimus explicabo labore architecto magnam accusantium veritatis tenetur repudiandae ab laboriosam?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis molestiae molestias atque asperiores illum nisi saepe placeat deleniti commodi dolore cupiditate quas. Ipsum odio quibusdam nemo est ducimus ea nesciunt?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga eligendi ex aperiam facilis alias! Quaerat asperiores quia molestias laboriosam commodi aspernatur dolorum nostrum impedit perspiciatis cupiditate quas distinctio earum dignissimos.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi laboriosam voluptates eum vero iste enim quas a nulla consequuntur quasi. Dolorum minima corporis molestias blanditiis ducimus obcaecati necessitatibus excepturi magnam?</p>
</div>
<h3>Accordion Four</h3>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto illo velit temporibus aliquam eius dolorem dolor laudantium quidem porro obcaecati nesciunt ducimus doloribus molestiae ad praesentium reiciendis enim eligendi fugit!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio quis delectus ducimus quibusdam ex totam natus sint nemo nam possimus explicabo labore architecto magnam accusantium veritatis tenetur repudiandae ab laboriosam?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis molestiae molestias atque asperiores illum nisi saepe placeat deleniti commodi dolore cupiditate quas. Ipsum odio quibusdam nemo est ducimus ea nesciunt?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga eligendi ex aperiam facilis alias! Quaerat asperiores quia molestias laboriosam commodi aspernatur dolorum nostrum impedit perspiciatis cupiditate quas distinctio earum dignissimos.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi laboriosam voluptates eum vero iste enim quas a nulla consequuntur quasi. Dolorum minima corporis molestias blanditiis ducimus obcaecati necessitatibus excepturi magnam?</p>
</div>
<h3>Accordion Five</h3>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto illo velit temporibus aliquam eius dolorem dolor laudantium quidem porro obcaecati nesciunt ducimus doloribus molestiae ad praesentium reiciendis enim eligendi fugit!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio quis delectus ducimus quibusdam ex totam natus sint nemo nam possimus explicabo labore architecto magnam accusantium veritatis tenetur repudiandae ab laboriosam?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis molestiae molestias atque asperiores illum nisi saepe placeat deleniti commodi dolore cupiditate quas. Ipsum odio quibusdam nemo est ducimus ea nesciunt?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga eligendi ex aperiam facilis alias! Quaerat asperiores quia molestias laboriosam commodi aspernatur dolorum nostrum impedit perspiciatis cupiditate quas distinctio earum dignissimos.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi laboriosam voluptates eum vero iste enim quas a nulla consequuntur quasi. Dolorum minima corporis molestias blanditiis ducimus obcaecati necessitatibus excepturi magnam?</p>
</div>
</div><!-- end of first -->
<h2>Single Settings</h2>
<div id="second">
<h3>Accordion One</h3>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto illo velit temporibus aliquam eius dolorem dolor laudantium quidem porro obcaecati nesciunt ducimus doloribus molestiae ad praesentium reiciendis enim eligendi fugit!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio quis delectus ducimus quibusdam ex totam natus sint nemo nam possimus explicabo labore architecto magnam accusantium veritatis tenetur repudiandae ab laboriosam?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis molestiae molestias atque asperiores illum nisi saepe placeat deleniti commodi dolore cupiditate quas. Ipsum odio quibusdam nemo est ducimus ea nesciunt?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga eligendi ex aperiam facilis alias! Quaerat asperiores quia molestias laboriosam commodi aspernatur dolorum nostrum impedit perspiciatis cupiditate quas distinctio earum dignissimos.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi laboriosam voluptates eum vero iste enim quas a nulla consequuntur quasi. Dolorum minima corporis molestias blanditiis ducimus obcaecati necessitatibus excepturi magnam?</p>
</div>
<h3>Accordion Two</h3>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto illo velit temporibus aliquam eius dolorem dolor laudantium quidem porro obcaecati nesciunt ducimus doloribus molestiae ad praesentium reiciendis enim eligendi fugit!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio quis delectus ducimus quibusdam ex totam natus sint nemo nam possimus explicabo labore architecto magnam accusantium veritatis tenetur repudiandae ab laboriosam?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis molestiae molestias atque asperiores illum nisi saepe placeat deleniti commodi dolore cupiditate quas. Ipsum odio quibusdam nemo est ducimus ea nesciunt?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga eligendi ex aperiam facilis alias! Quaerat asperiores quia molestias laboriosam commodi aspernatur dolorum nostrum impedit perspiciatis cupiditate quas distinctio earum dignissimos.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi laboriosam voluptates eum vero iste enim quas a nulla consequuntur quasi. Dolorum minima corporis molestias blanditiis ducimus obcaecati necessitatibus excepturi magnam?</p>
</div>
<h3>Accordion Three</h3>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto illo velit temporibus aliquam eius dolorem dolor laudantium quidem porro obcaecati nesciunt ducimus doloribus molestiae ad praesentium reiciendis enim eligendi fugit!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio quis delectus ducimus quibusdam ex totam natus sint nemo nam possimus explicabo labore architecto magnam accusantium veritatis tenetur repudiandae ab laboriosam?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis molestiae molestias atque asperiores illum nisi saepe placeat deleniti commodi dolore cupiditate quas. Ipsum odio quibusdam nemo est ducimus ea nesciunt?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga eligendi ex aperiam facilis alias! Quaerat asperiores quia molestias laboriosam commodi aspernatur dolorum nostrum impedit perspiciatis cupiditate quas distinctio earum dignissimos.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi laboriosam voluptates eum vero iste enim quas a nulla consequuntur quasi. Dolorum minima corporis molestias blanditiis ducimus obcaecati necessitatibus excepturi magnam?</p>
</div>
<h3>Accordion Four</h3>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto illo velit temporibus aliquam eius dolorem dolor laudantium quidem porro obcaecati nesciunt ducimus doloribus molestiae ad praesentium reiciendis enim eligendi fugit!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio quis delectus ducimus quibusdam ex totam natus sint nemo nam possimus explicabo labore architecto magnam accusantium veritatis tenetur repudiandae ab laboriosam?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis molestiae molestias atque asperiores illum nisi saepe placeat deleniti commodi dolore cupiditate quas. Ipsum odio quibusdam nemo est ducimus ea nesciunt?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga eligendi ex aperiam facilis alias! Quaerat asperiores quia molestias laboriosam commodi aspernatur dolorum nostrum impedit perspiciatis cupiditate quas distinctio earum dignissimos.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi laboriosam voluptates eum vero iste enim quas a nulla consequuntur quasi. Dolorum minima corporis molestias blanditiis ducimus obcaecati necessitatibus excepturi magnam?</p>
</div>
<h3>Accordion Five</h3>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto illo velit temporibus aliquam eius dolorem dolor laudantium quidem porro obcaecati nesciunt ducimus doloribus molestiae ad praesentium reiciendis enim eligendi fugit!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio quis delectus ducimus quibusdam ex totam natus sint nemo nam possimus explicabo labore architecto magnam accusantium veritatis tenetur repudiandae ab laboriosam?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis molestiae molestias atque asperiores illum nisi saepe placeat deleniti commodi dolore cupiditate quas. Ipsum odio quibusdam nemo est ducimus ea nesciunt?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga eligendi ex aperiam facilis alias! Quaerat asperiores quia molestias laboriosam commodi aspernatur dolorum nostrum impedit perspiciatis cupiditate quas distinctio earum dignissimos.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi laboriosam voluptates eum vero iste enim quas a nulla consequuntur quasi. Dolorum minima corporis molestias blanditiis ducimus obcaecati necessitatibus excepturi magnam?</p>
</div>
</div><!-- end of second -->
<h2>Mix Settings</h2>
<div id="thirth">
<h3>Accordion One</h3>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto illo velit temporibus aliquam eius dolorem dolor laudantium quidem porro obcaecati nesciunt ducimus doloribus molestiae ad praesentium reiciendis enim eligendi fugit!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio quis delectus ducimus quibusdam ex totam natus sint nemo nam possimus explicabo labore architecto magnam accusantium veritatis tenetur repudiandae ab laboriosam?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis molestiae molestias atque asperiores illum nisi saepe placeat deleniti commodi dolore cupiditate quas. Ipsum odio quibusdam nemo est ducimus ea nesciunt?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga eligendi ex aperiam facilis alias! Quaerat asperiores quia molestias laboriosam commodi aspernatur dolorum nostrum impedit perspiciatis cupiditate quas distinctio earum dignissimos.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi laboriosam voluptates eum vero iste enim quas a nulla consequuntur quasi. Dolorum minima corporis molestias blanditiis ducimus obcaecati necessitatibus excepturi magnam?</p>
</div>
<h3>Accordion Two</h3>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto illo velit temporibus aliquam eius dolorem dolor laudantium quidem porro obcaecati nesciunt ducimus doloribus molestiae ad praesentium reiciendis enim eligendi fugit!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio quis delectus ducimus quibusdam ex totam natus sint nemo nam possimus explicabo labore architecto magnam accusantium veritatis tenetur repudiandae ab laboriosam?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis molestiae molestias atque asperiores illum nisi saepe placeat deleniti commodi dolore cupiditate quas. Ipsum odio quibusdam nemo est ducimus ea nesciunt?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga eligendi ex aperiam facilis alias! Quaerat asperiores quia molestias laboriosam commodi aspernatur dolorum nostrum impedit perspiciatis cupiditate quas distinctio earum dignissimos.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi laboriosam voluptates eum vero iste enim quas a nulla consequuntur quasi. Dolorum minima corporis molestias blanditiis ducimus obcaecati necessitatibus excepturi magnam?</p>
</div>
<h3>Accordion Three</h3>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto illo velit temporibus aliquam eius dolorem dolor laudantium quidem porro obcaecati nesciunt ducimus doloribus molestiae ad praesentium reiciendis enim eligendi fugit!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio quis delectus ducimus quibusdam ex totam natus sint nemo nam possimus explicabo labore architecto magnam accusantium veritatis tenetur repudiandae ab laboriosam?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis molestiae molestias atque asperiores illum nisi saepe placeat deleniti commodi dolore cupiditate quas. Ipsum odio quibusdam nemo est ducimus ea nesciunt?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga eligendi ex aperiam facilis alias! Quaerat asperiores quia molestias laboriosam commodi aspernatur dolorum nostrum impedit perspiciatis cupiditate quas distinctio earum dignissimos.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi laboriosam voluptates eum vero iste enim quas a nulla consequuntur quasi. Dolorum minima corporis molestias blanditiis ducimus obcaecati necessitatibus excepturi magnam?</p>
</div>
<h3>Accordion Four</h3>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto illo velit temporibus aliquam eius dolorem dolor laudantium quidem porro obcaecati nesciunt ducimus doloribus molestiae ad praesentium reiciendis enim eligendi fugit!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio quis delectus ducimus quibusdam ex totam natus sint nemo nam possimus explicabo labore architecto magnam accusantium veritatis tenetur repudiandae ab laboriosam?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis molestiae molestias atque asperiores illum nisi saepe placeat deleniti commodi dolore cupiditate quas. Ipsum odio quibusdam nemo est ducimus ea nesciunt?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga eligendi ex aperiam facilis alias! Quaerat asperiores quia molestias laboriosam commodi aspernatur dolorum nostrum impedit perspiciatis cupiditate quas distinctio earum dignissimos.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi laboriosam voluptates eum vero iste enim quas a nulla consequuntur quasi. Dolorum minima corporis molestias blanditiis ducimus obcaecati necessitatibus excepturi magnam?</p>
</div>
<h3>Accordion Five</h3>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto illo velit temporibus aliquam eius dolorem dolor laudantium quidem porro obcaecati nesciunt ducimus doloribus molestiae ad praesentium reiciendis enim eligendi fugit!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio quis delectus ducimus quibusdam ex totam natus sint nemo nam possimus explicabo labore architecto magnam accusantium veritatis tenetur repudiandae ab laboriosam?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis molestiae molestias atque asperiores illum nisi saepe placeat deleniti commodi dolore cupiditate quas. Ipsum odio quibusdam nemo est ducimus ea nesciunt?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga eligendi ex aperiam facilis alias! Quaerat asperiores quia molestias laboriosam commodi aspernatur dolorum nostrum impedit perspiciatis cupiditate quas distinctio earum dignissimos.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi laboriosam voluptates eum vero iste enim quas a nulla consequuntur quasi. Dolorum minima corporis molestias blanditiis ducimus obcaecati necessitatibus excepturi magnam?</p>
</div>
</div><!-- end of thirth -->
</main><!-- end of main-wrapper -->
</div><!-- end of wrapper -->
</body>
</html>
JS代码(rlaccordion.js):
/** Author:Rodrigo Ludgero http://rodrigoludgero.com/** Twitter:@rodrigoludgero** Description:A jQuery accordion plugin** License:MIT licensed** Project:jQuery rlAccordion Plugin https://github.com/Rodrigo-Ludgero*/
(function( $ ){
$.fn.rlAccordion = function(method,options){
var settings = $.extend({
rlAccordion:"rlAccordion",// add class in the same level of a parent statement for avoid styles conflictsignTag:"<span></span>",// html tag parent signstitles:"h3",// html tag parent of minus and plus,this may replaced also for a classtitlesChild:"span",// html child titles and parent signscontainer:"div",// html tag adjacent sibling of titleschildNum:0,// number of the children start openclassOpen:"opened",// add class to the titles option adjacent siblingopen:"+
",// unicode plus signclose:"−
",// unicode minus signrlOpen:"rl-open",// class for a plus signrlClose:"rl-close"// class for a minus sign}
,options);
var $element = $(this).children(settings.titles);
// limit the scopevar $symbols = $(settings.signTag);
// create a html tagvar $signOpen = $symbols.html(settings.open);
// insert a unicode open sign into the parentvar $signClose = $symbols.html(settings.close);
// insert a unicode close sign into the parentvar $insertElement = $symbols.appendTo($element);
// insert symbols signs into titles settings// add class in the same level of a parent statement for avoid styles conflict$element.parent().addClass(settings.rlAccordion);
// parse code to assign the corresponding unicode and classif ( $element.next().hasClass(settings.classOpen) ){
$element.children().html(settings.close).addClass(settings.rlClose);
}
else{
$element.children().html(settings.open).addClass(settings.rlOpen);
}
var methods ={
init:function(){
// defaults settingsreturn this.each(function(){
$(this).find(settings.container).eq(settings.childNum).addClass(settings.classOpen).slideDown() .prev().children().html(settings.close).removeClass(settings.rlOpen).addClass(settings.rlClose);
// assign the children start open$element.on('click',function(){
$(this).parent().find(settings.container).removeClass(settings.classOpen).slideUp();
$(this).parent().find(settings.titles).children().html(settings.open);
$(this).next().addClass(settings.classOpen).slideDown();
if ( $(this).children().hasClass(settings.rlClose) ){
$(this).next().stop();
}
if ( $(this).next().hasClass(settings.classOpen) ){
$(this).parent().find(settings.titlesChild).removeClass(settings.rlClose).addClass(settings.rlOpen);
$(this).children().html(settings.close).removeClass(settings.rlOpen).addClass(settings.rlClose);
}
else{
$(this).children().html(settings.open).removeClass(settings.rlClose).addClass(settings.rlOpen);
}
}
);
}
);
}
,single:function(){
return this.each(function(){
$(this).find(settings.container).eq(settings.childNum).addClass(settings.classOpen).slideDown() .prev().children().html(settings.close).removeClass(settings.rlOpen).addClass(settings.rlClose);
// assign the children start open$element.on('click',function(){
$(this).next().slideToggle().toggleClass(settings.classOpen);
if ($(this).next().hasClass(settings.classOpen)){
$(this).children().html(settings.close).removeClass(settings.rlOpen).addClass(settings.rlClose);
}
else{
$(this).children().html(settings.open).removeClass(settings.rlClose).addClass(settings.rlOpen);
}
}
);
}
);
}
,mix:function(){
return this.each(function(){
$(this).find(settings.container).eq(settings.childNum).addClass(settings.classOpen).slideDown() .prev().children().html(settings.close).removeClass(settings.rlOpen).addClass(settings.rlClose);
// assign the children start open$element.on('click',function(){
if ( $(this).next().hasClass(settings.classOpen) ){
$(this).parent().find(settings.container).removeClass(settings.classOpen).slideUp();
$(this).parent().find(settings.titles).children().html(settings.open).removeClass(settings.rlClose).addClass(settings.rlOpen);
$(this).children().html(settings.open);
}
else{
$(this).parent().find(settings.container).removeClass(settings.classOpen).slideUp();
$(this).next().addClass(settings.classOpen).slideDown();
$(this).parent().find(settings.titles).children().html(settings.open).removeClass(settings.rlClose).addClass(settings.rlOpen);
$(this).children().html(settings.close).removeClass(settings.rlOpen).addClass(settings.rlClose);
}
}
);
}
);
}
}
;
// Method calling logicif ( methods[method] ){
return methods[ method ].apply( this,Array.prototype.slice.call( arguments,1 ));
}
else if ( typeof method === 'object' || ! method ){
return methods.init.apply( this,arguments );
}
else{
$.error( 'Method ' + method + ' does not exist on jQuery.rlAccordion ' );
}
}
;
}
)( jQuery );
JS代码(scripts.js):
$(function(){
$("#first").rlAccordion();
$("#second").rlAccordion('single',{
childNum:1}
);
$("#thirth").rlAccordion('mix',{
childNum:2}
);
}
);
CSS代码(styles.css):
@charset "utf-8";/*! normalize.css v2.1.3 | MIT License | git.io/normalize */
/* ========================================================================== HTML5 display definitions ========================================================================== */
/** * Correct `block` display not defined in IE 8/9. */
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}
/** * Correct `inline-block` display not defined in IE 8/9. */
audio,canvas,video{display:inline-block;}
/** * Prevent modern browsers from displaying `audio` without controls. * Remove excess height in iOS 5 devices. */
audio:not([controls]){display:none;height:0;}
/** * Address `[hidden]` styling not present in IE 8/9. * Hide the `template` element in IE,Safari,and Firefox < 22. */
[hidden],template{display:none;}
/* ========================================================================== Base ========================================================================== */
/** * 1. Set default font family to sans-serif. * 2. Prevent iOS text size adjust after orientation change,without disabling * user zoom. */
html{font-family:sans-serif;/* 1 */
-ms-text-size-adjust:100%;/* 2 */
-webkit-text-size-adjust:100%;/* 2 */
}
/** * Remove default margin. */
body{margin:0;}
/* ========================================================================== Links ========================================================================== */
/** * Remove the gray background color from active links in IE 10. */
a{background:transparent;}
/** * Address `outline` inconsistency between Chrome and other browsers. */
a:focus{outline:thin dotted;}
/** * Improve readability when focused and also mouse hovered in all browsers. */
a:active,a:hover{outline:0;}
/* ========================================================================== Typography ========================================================================== */
/** * Address variable `h1` font-size and margin within `section` and `article` * contexts in Firefox 4+,Safari 5,and Chrome. */
h1{font-size:2em;margin:0.67em 0;}
/** * Address styling not present in IE 8/9,Safari 5,and Chrome. */
abbr[title]{border-bottom:1px dotted;}
/** * Address style set to `bolder` in Firefox 4+,Safari 5,and Chrome. */
b,strong{font-weight:bold;}
/** * Address styling not present in Safari 5 and Chrome. */
dfn{font-style:italic;}
/** * Address differences between Firefox and other browsers. */
hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}
/** * Address styling not present in IE 8/9. */
mark{background:#ff0;color:#000;}
/** * Correct font family set oddly in Safari 5 and Chrome. */
code,kbd,pre,samp{font-family:monospace,serif;font-size:1em;}
/** * Improve readability of pre-formatted text in all browsers. */
pre{white-space:pre-wrap;}
/** * Set consistent quote types. */
q{quotes:"\201C" "\201D" "\2018" "\2019";}
/** * Address inconsistent and variable font size in all browsers. */
small{font-size:80%;}
/** * Prevent `sub` and `sup` affecting `line-height` in all browsers. */
sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}
sup{top:-0.5em;}
sub{bottom:-0.25em;}
/* ========================================================================== Embedded content ========================================================================== */
/** * Remove border when inside `a` element in IE 8/9. */
img{border:0;}
/** * Correct overflow displayed oddly in IE 9. */
svg:not(:root){overflow:hidden;}
/* ========================================================================== Figures ========================================================================== */
/** * Address margin not present in IE 8/9 and Safari 5. */
figure{margin:0;}
/* ========================================================================== Forms ========================================================================== */
/** * Define consistent border,margin,and padding. */
fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}
/** * 1. Correct `color` not being inherited in IE 8/9. * 2. Remove padding so people aren't caught out if they zero out fieldsets. */
legend{border:0;/* 1 */
padding:0;/* 2 */
}
/** * 1. Correct font family not being inherited in all browsers. * 2. Correct font size not being inherited in all browsers. * 3. Address margins set differently in Firefox 4+,Safari 5,and Chrome. */
button,input,select,textarea{font-family:inherit;/* 1 */
font-size:100%;/* 2 */
margin:0;/* 3 */
}
/** * Address Firefox 4+ setting `line-height` on `input` using `!important` in * the UA stylesheet. */
button,input{line-height:normal;}
/** * Address inconsistent `text-transform` inheritance for `button` and `select`. * All other form control elements do not inherit `text-transform` values. * Correct `button` style inheritance in Chrome,Safari 5+,and IE 8+. * Correct `select` style inheritance in Firefox 4+ and Opera. */
button,select{text-transform:none;}
/** * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` * and `video` controls. * 2. Correct inability to style clickable `input` types in iOS. * 3. Improve usability and consistency of cursor style between image-type * `input` and others. */
button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;/* 2 */
cursor:pointer;/* 3 */
}
/** * Re-set default cursor for disabled elements. */
button[disabled],html input[disabled]{cursor:default;}
/** * 1. Address box sizing set to `content-box` in IE 8/9/10. * 2. Remove excess padding in IE 8/9/10. */
input[type="checkbox"],input[type="radio"]{box-sizing:border-box;/* 1 */
padding:0;/* 2 */
}
/** * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome. * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome * (include `-moz` to future-proof). */
input[type="search"]{-webkit-appearance:textfield;/* 1 */
-moz-box-sizing:content-box;-webkit-box-sizing:content-box;/* 2 */
box-sizing:content-box;}
/** * Remove inner padding and search cancel button in Safari 5 and Chrome * on OS X. */
input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}
/** * Remove inner padding and border in Firefox 4+. */
button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}
/** * 1. Remove default vertical scrollbar in IE 8/9. * 2. Improve readability and alignment in all browsers. */
textarea{overflow:auto;/* 1 */
vertical-align:top;/* 2 */
}
/* ========================================================================== Tables ========================================================================== */
/** * Remove most spacing between table cells. */
table{border-collapse:collapse;border-spacing:0;}
/* --------------------- ChunkFiveRegular -------------------- */
@font-face{font-family:'ChunkFiveRegular';src:url('../font/ChunkFive-fontfacekit/Chunkfive-webfont.eot');src:url('../font/ChunkFive-fontfacekit/Chunkfive-webfont.eot?#iefix') format('embedded-opentype'),url('../font/ChunkFive-fontfacekit/Chunkfive-webfont.woff') format('woff'),url('../font/ChunkFive-fontfacekit/Chunkfive.otf') format('otf'),url('../font/ChunkFive-fontfacekit/Chunkfive-webfont.ttf') format('truetype'),url('../font/ChunkFive-fontfacekit/Chunkfive-webfont.svg#ChunkFiveRegular') format('svg');font-weight:normal;font-style:normal;}
html{overflow-y:scroll;}
/* avoid jumping in firefox when displaying the scroll */
body{background-image:url(../img/bg.png);font-family:helvetica,arial,sans-serif;font-size:62.5%;/* 1em = 10px */
}
h1{font-size:3em;}
h2{font-size:2.2em;}
h3{font-size:1.8em;}
h4{font-size:1.6em;}
a{color:#fff;text-decoration:none;}
a:hover{text-decoration:none;}
p{color:#fff;font-size:1.4em;line-height:1.4em;margin-bottom:10px;text-shadow:1px 2px 3px #000;}
ul{list-style-type:none;}
input,textarea,textarea:focus,a:focus,a:active{border:none;outline:none;}
#wrapper{margin:0 auto;position:relative;max-width:640px;}
/* Header__________________________________________ */
header{float:left;margin:0 auto;position:relative;max-width:100%;width:100%;}
.logo{float:left;max-width:100%;width:100%;}
.logo a{color:#242628;display:block;float:left;font-family:'ChunkFiveRegular',Arial,sans-serif;font-size:3.7em;line-height:2em;text-decoration:none;text-transform:capitalize;text-shadow:1px 1px #555;-moz-transition:all 1s ease;-ms-transition:all 1s ease;-o-transition:all 1s ease;-webkit-transition:all 1s ease;text-align:center;max-width:100%;width:100%;}
.logo a:hover{color:#333433;text-shadow:1px 1px #666;}
.follow{float:left;margin:0 0 4%;width:100%;}
.btn{background-color:#007197;background-image:-moz-linear-gradient(center bottom,#005d7c 0%,#0088b5 100%);background-image:-o-linear-gradient(center bottom,#005d7c 0%,#0088b5 100%);background-image:-webkit-linear-gradient(left bottom,left top,color-stop(0,#005d7c),color-stop(1,#0088b5));background-image:-ms-linear-gradient(top,#005d7c 0%,#0088b5 100%);background-image:linear-gradient(top,#005d7c 0%,#0088b5 100%);border:1px solid #1D4253;border-radius:5px;box-shadow:0 2px 5px rgba(0,0,0,0.55);color:#FFFFFF;display:block;font-size:1.2em;margin:0 auto;text-align:center;text-decoration:none;text-shadow:1px 1px 0 #004e68;}
.btn:hover{background-color:#0081ab;background-image:-moz-linear-gradient(center bottom,#00749a 0%,#00a5c6 100%);background-image:-o-linear-gradient(center bottom,#00749a 0%,#00a5c6 100%);background-image:-webkit-linear-gradient(left bottom,left top,color-stop(0,#00749a),color-stop(1,#00a5c6));background-image:-ms-linear-gradient(top,#00749a 0%,#00a5c6 100%);background-image:linear-gradient(top,#00749a 0%,#00a5c6 100%);transition:all 1s ease;-webkit-transition:all 1s ease;}
.btn:active{background-color:#006486;background-image:-moz-linear-gradient(center bottom,#0085a6 0%,#00537a 100%);background-image:-o-linear-gradient(center bottom,#0085a6 0%,#00537a 100%);background-image:-webkit-linear-gradient(left bottom,left top,color-stop(0,#0085a6),color-stop(1,#00537a));background-image:-ms-linear-gradient(top,#0085a6 0%,#00537a 100%);background-image:linear-gradient(top,#0085a6 0%,#00537a 100%);box-shadow:0 0 2px rgba(0,0,0,0.75);}
.btn span{border-radius:5px;border-top:1px solid #00B8D3;display:block;font-weight:bold;padding:2% 0;}
.btn span:active{border-top-color:transparent;}
/* Main__________________________________________ */
.main-wrapper{float:left;width:100%;}
.main-wrapper h2{color:#242628;display:block;font-family:'ChunkFiveRegular',Arial,sans-serif;font-size:3em;font-weight:bold;line-height:2em;margin:6% 0 1%;text-decoration:none;text-transform:capitalize;text-shadow:1px 1px #555;-moz-transition:all 1s ease;-ms-transition:all 1s ease;-o-transition:all 1s ease;-webkit-transition:all 1s ease;text-align:center;max-width:100%;width:100%;}
.rlAccordion > h3{background-color:#007197;background-image:-moz-linear-gradient(center bottom,#005d7c 0%,#0088b5 100%);background-image:-o-linear-gradient(center bottom,#005d7c 0%,#0088b5 100%);background-image:-webkit-linear-gradient(left bottom,left top,color-stop(0,#005d7c),color-stop(1,#0088b5));background-image:-ms-linear-gradient(top,#005d7c 0%,#0088b5 100%);background-image:linear-gradient(top,#005d7c 0%,#0088b5 100%);border:1px solid #1D4253;border-radius:5px;box-shadow:0 2px 5px rgba(0,0,0,0.55);color:#fff;font-family:"Times New Roman",Times,serif;font-size:1.4em;font-weight:normal;margin:0 auto;padding:3%;text-decoration:none;text-shadow:1px 1px 0 #004E68;}
.rlAccordion > h3 > span{float:right;font-family:arial,serif,sans-serif;}
.rlAccordion > h3 + div{display:none;padding:2% 5%;}
/* Footer__________________________________________ */
footer{float:left;margin:0 auto;max-width:100%;width:100%;}
.copy p{float:right;font-size:1.2em;margin:6% 0;opacity:0.3;transition:all 1s ease;-webkit-transition:all 1s ease;}
.copy p:hover{opacity:0.9;}
/* IE7__________________________________________ */
/* position of minus and plus sign in IE7 */
/* if your html structure is based in HTML5,consider use a SHIV*/
.ie7 .rlAccordion h3 span{position:absolute;right:20px;}
分享到QQ
分享到微博
微信扫一扫
