以下是 jquery嵌套下拉效果特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jquery嵌套下拉效果</title>
<link rel="stylesheet" type="text/css" href="css/default.css" />
<link rel="stylesheet" type="text/css" href="css/component.css" />
<script src="js/modernizr.custom.js"></script>
</head>
<body>
<div class="container">
<div class="main">
<ul id="cbp-ntaccordion" class="cbp-ntaccordion">
<li>
<h3 class="cbp-nttrigger">Oat cake tootsie roll</h3>
<div class="cbp-ntcontent">
<p>Jelly sweet roll dragée gummies. Jelly-o cotton candy gingerbread. Dessert tart bear claw gummi bears I love oat cake cotton candy sesame snaps carrot cake. Croissant marshmallow tiramisu icing soufflé chocolate cake. I love pie icing. Sweet I love sweet roll cheesecake dessert. Tiramisu gingerbread I love. Muffin chocolate cake powder cheesecake oat cake tootsie roll candy soufflé. Brownie toffee powder tiramisu. Wafer I love jujubes croissant. Chocolate cake candy jujubes tootsie roll bonbon toffee I love. Topping candy jelly-o. Halvah faworki I love I love toffee pastry icing chupa chups. Pie gingerbread candy canes oat cake.</p>
<ul class="cbp-ntsubaccordion">
<li>
<h4 class="cbp-nttrigger">Donut pastry</h4>
<div class="cbp-ntcontent">
<p>Gingerbread cotton candy halvah gingerbread. Apple pie wypas liquorice I love chocolate cake I love. Jelly cotton candy wypas lemon drops. Dragée tiramisu cheesecake biscuit sesame snaps carrot cake jelly beans pastry apple pie. Chocolate cake cotton candy candy canes brownie ice cream. Muffin chocolate cake jelly-o cake pudding. Jujubes I love cookie. I love cupcake I love bear claw sweet croissant. Wypas bonbon chocolate cake bonbon bear claw gummies. Liquorice danish jelly tootsie roll. I love danish icing lemon drops dessert pie jujubes. Fruitcake wafer I love biscuit. Donut pastry apple pie sugar plum soufflé ice cream tart bonbon candy.</p>
</div>
</li>
<li>
<h4 class="cbp-nttrigger">Carrot cake</h4>
<div class="cbp-ntcontent">
<p>Wafer muffin cupcake apple pie tootsie roll I love. Carrot cake apple pie I love dessert. I love carrot cake lollipop jelly jelly-o brownie cake. Croissant brownie donut gingerbread dessert icing. Sugar plum jelly candy pudding liquorice liquorice cotton candy pie. Powder sesame snaps I love chocolate bar bonbon. Pudding gummi bears donut applicake carrot cake I love I love icing cake.</p>
</div>
</li>
<li>
<h4 class="cbp-nttrigger">Tootsie roll marshmallow</h4>
<div class="cbp-ntcontent">
<p>I love tootsie roll marshmallow. Halvah jelly bear claw lemon drops lollipop. Brownie tiramisu I love I love halvah wafer. Powder jelly beans sesame snaps. Powder biscuit I love wypas soufflé apple pie marzipan. Cheesecake apple pie halvah croissant jelly I love.</p>
</div>
</li>
</ul>
</div>
</li>
<li>
<h3 class="cbp-nttrigger">Cream gummi bears</h3>
<div class="cbp-ntcontent">
<p>Cotton candy chocolate cake macaroon applicake I love. Tart soufflé I love powder. I love tiramisu lollipop pie. Pudding gummi bears sweet. Candy chocolate I love jujubes pie donut. Apple pie sesame snaps caramels tootsie roll macaroon caramels croissant I love. Sweet roll chocolate lemon drops. I love I love muffin gummi bears I love cotton candy.</p>
<ul class="cbp-ntsubaccordion">
<li>
<h4 class="cbp-nttrigger">Cookie ice cream</h4>
<div class="cbp-ntcontent">
<p>Liquorice jelly-o oat cake gingerbread chocolate caramels chupa chups muffin candy. I love dessert biscuit halvah lemon drops. Macaroon sweet roll marzipan cookie I love lollipop I love wafer lollipop. Caramels candy pudding brownie. Oat cake cake gingerbread bear claw croissant dessert. Lemon drops oat cake sugar plum wypas cupcake fruitcake liquorice. Muffin wafer tootsie roll caramels. I love brownie powder icing marzipan dragée. Pie fruitcake soufflé sweet roll faworki candy canes I love. Jelly-o carrot cake donut cheesecake.</p>
</div>
</li>
<li>
<h4 class="cbp-nttrigger">Biscuit chupa chups tart</h4>
<div class="cbp-ntcontent">
<p>Sweet muffin fruitcake. Marshmallow dessert gummies dragée. Dragée pudding caramels toffee I love I love. Pie candy canes soufflé candy jelly-o marshmallow marshmallow. Biscuit danish jelly beans lollipop sweet sesame snaps oat cake. I love chupa chups cake ice cream ice cream applicake tart. Dessert muffin chocolate bar.</p>
</div>
</li>
<li>
<h4 class="cbp-nttrigger">Chocolate tart macaroon</h4>
<div class="cbp-ntcontent">
<p>Faworki oat cake cotton candy cookie ice cream gummi bears. Ice cream bear claw icing macaroon apple pie caramels. Sugar plum applicake candy canes sesame snaps I love. Sugar plum brownie biscuit tiramisu marzipan. Ice cream I love sweet bear claw I love sweet cake tart. Danish marshmallow I love wypas pastry. Chocolate tart macaroon wypas sesame snaps apple pie chocolate sesame snaps. Cotton candy sweet roll pudding oat cake I love marzipan wafer chocolate cake.</p>
</div>
</li>
<li>
<h4 class="cbp-nttrigger">Lollipop liquorice</h4>
<div class="cbp-ntcontent">
<p>Cookie ice cream sweet I love cupcake. Fruitcake topping wafer. Lollipop liquorice I love tart wypas biscuit. Danish jelly-o gingerbread. Faworki jelly pastry. Wypas wypas topping I love I love candy canes liquorice. I love sweet roll fruitcake dragée wafer icing bonbon.</p>
</div>
</li>
</ul>
</div>
</li>
<li>
<h3 class="cbp-nttrigger">Jelly marzipan sugar plum</h3>
<div class="cbp-ntcontent">
<p>Jujubes bonbon oat cake. Cookie cookie liquorice bear claw pudding jelly-o. Sugar plum oat cake cookie. Sweet pudding tiramisu. Donut bear claw marshmallow tootsie roll I love lollipop icing. Candy chocolate bar biscuit cake tart candy donut. Carrot cake tiramisu carrot cake I love chocolate cake cake pastry carrot cake faworki. Jujubes marzipan carrot cake lemon drops dragée cake fruitcake macaroon dessert. Cotton candy I love icing powder. Gummies marzipan biscuit I love I love pudding.</p>
<ul class="cbp-ntsubaccordion">
<li>
<h4 class="cbp-nttrigger">Toffee soufflé chocolate bar</h4>
<div class="cbp-ntcontent">
<p>Carrot cake chocolate cake cupcake pudding chocolate sweet. Dragée liquorice macaroon cookie dragée jelly beans. I love liquorice applicake cheesecake. I love jelly marzipan sugar plum bonbon. Pastry chupa chups pie jelly candy canes. Donut carrot cake ice cream pudding halvah jelly cupcake. Danish candy canes topping.</p>
</div>
</li>
<li>
<h4 class="cbp-nttrigger">Subtitle</h4>
<div class="cbp-ntcontent">
<p>Dragée chocolate cake cake. Marshmallow toffee chocolate cake. Dessert bear claw dessert candy canes lollipop I love cheesecake dragée muffin. Oat cake cupcake chocolate cotton candy. Danish sweet oat cake. Cookie bear claw bear claw bear claw wypas candy canes icing. Candy canes powder toffee soufflé chocolate bar macaroon. Soufflé I love brownie cookie I love chupa chups. Pastry pudding icing.</p>
</div>
</li>
<li>
<h4 class="cbp-nttrigger">Pie wafer brownie</h4>
<div class="cbp-ntcontent">
<p>Macaroon I love faworki halvah lollipop croissant chocolate cake lemon drops cheesecake. Croissant cookie halvah tiramisu powder tootsie roll applicake lemon drops. Ice cream jelly powder I love candy canes biscuit gingerbread jelly I love. Sugar plum marshmallow marzipan bear claw cookie. Jelly-o I love cake danish I love. Wypas donut dessert. I love carrot cake oat cake I love I love lollipop donut. Pie wafer brownie. Cake toffee marshmallow I love I love jelly-o.</p>
</div>
</li>
</ul>
</div>
</li>
<li>
<h3 class="cbp-nttrigger">Danish soufflé</h3>
<div class="cbp-ntcontent">
<p>Lemon drops ice cream I love danish soufflé cake jelly cupcake. Bear claw I love I love tart I love liquorice bear claw. Halvah chocolate gummi bears jelly-o jelly-o lollipop lemon drops liquorice. Candy canes tiramisu candy faworki apple pie. Chocolate jujubes sesame snaps ice cream cupcake. Halvah topping chupa chups biscuit. I love I love chupa chups tootsie roll marshmallow tart gummi bears chocolate.</p>
<ul class="cbp-ntsubaccordion">
<li>
<h4 class="cbp-nttrigger">Biscuit bear claw bear claw</h4>
<div class="cbp-ntcontent">
<p>Halvah I love jelly beans. Danish I love jelly beans sweet roll tart biscuit. Lemon drops wypas toffee candy canes lemon drops dragée. Sweet roll I love bonbon I love. Liquorice chocolate bar lollipop faworki lollipop sugar plum. Soufflé croissant lemon drops cotton candy. Jelly candy canes cupcake halvah macaroon.</p>
</div>
</li>
<li>
<h4 class="cbp-nttrigger">Jujubes bear claw topping applecake</h4>
<div class="cbp-ntcontent">
<p>Pastry ice cream pie marshmallow muffin gingerbread. Bonbon wafer sweet roll candy lollipop. Sugar plum jujubes sweet roll donut gummi bears chupa chups ice cream. Icing I love apple pie lemon drops faworki sugar plum sweet roll. Marshmallow liquorice cotton candy jujubes chocolate bar fruitcake topping carrot cake. Chocolate croissant cupcake macaroon pastry gummi bears jelly beans. Oat cake bear claw lollipop chocolate cake. Ice cream danish faworki dragée I love chupa chups cotton candy I love. Cookie gummi bears oat cake faworki powder. Wypas jelly bonbon tiramisu apple pie jelly beans.</p>
</div>
</li>
</ul>
</div>
</li>
<li>
<h3 class="cbp-nttrigger">Jujubes bear claw topping</h3>
<div class="cbp-ntcontent">
<p>Cotton candy chocolate cake macaroon applicake I love. Tart soufflé I love powder. I love tiramisu lollipop pie. Pudding gummi bears sweet. Candy chocolate I love jujubes pie donut. Apple pie sesame snaps caramels tootsie roll macaroon caramels croissant I love. Sweet roll chocolate lemon drops. I love I love muffin gummi bears I love cotton candy.</p>
<ul class="cbp-ntsubaccordion">
<li>
<h4 class="cbp-nttrigger">Faworki jelly pastry</h4>
<div class="cbp-ntcontent">
<p>Liquorice jelly-o oat cake gingerbread chocolate caramels chupa chups muffin candy. I love dessert biscuit halvah lemon drops. Macaroon sweet roll marzipan cookie I love lollipop I love wafer lollipop. Caramels candy pudding brownie. Oat cake cake gingerbread bear claw croissant dessert. Lemon drops oat cake sugar plum wypas cupcake fruitcake liquorice. Muffin wafer tootsie roll caramels. I love brownie powder icing marzipan dragée. Pie fruitcake soufflé sweet roll faworki candy canes I love. Jelly-o carrot cake donut cheesecake.</p>
<ul class="cbp-ntsubaccordion">
<li>
<h5 class="cbp-nttrigger">Donut pastry</h5>
<div class="cbp-ntcontent">
<p>Gingerbread cotton candy halvah gingerbread. Apple pie wypas liquorice I love chocolate cake I love. Jelly cotton candy wypas lemon drops. Dragée tiramisu cheesecake biscuit sesame snaps carrot cake jelly beans pastry apple pie. Chocolate cake cotton candy candy canes brownie ice cream. Muffin chocolate cake jelly-o cake pudding. Jujubes I love cookie. I love cupcake I love bear claw sweet croissant. Wypas bonbon chocolate cake bonbon bear claw gummies. Liquorice danish jelly tootsie roll. I love danish icing lemon drops dessert pie jujubes. Fruitcake wafer I love biscuit. Donut pastry apple pie sugar plum soufflé ice cream tart bonbon candy.</p>
</div>
</li>
<li>
<h5 class="cbp-nttrigger">Carrot cake</h5>
<div class="cbp-ntcontent">
<p>Wafer muffin cupcake apple pie tootsie roll I love. Carrot cake apple pie I love dessert. I love carrot cake lollipop jelly jelly-o brownie cake. Croissant brownie donut gingerbread dessert icing. Sugar plum jelly candy pudding liquorice liquorice cotton candy pie. Powder sesame snaps I love chocolate bar bonbon. Pudding gummi bears donut applicake carrot cake I love I love icing cake.</p>
</div>
</li>
<li>
<h5 class="cbp-nttrigger">Tootsie roll marshmallow</h5>
<div class="cbp-ntcontent">
<p>I love tootsie roll marshmallow. Halvah jelly bear claw lemon drops lollipop. Brownie tiramisu I love I love halvah wafer. Powder jelly beans sesame snaps. Powder biscuit I love wypas soufflé apple pie marzipan. Cheesecake apple pie halvah croissant jelly I love.</p>
</div>
</li>
</ul>
</div>
</li>
<li>
<h4 class="cbp-nttrigger">Chocolate caramels</h4>
<div class="cbp-ntcontent">
<p>Faworki oat cake cotton candy cookie ice cream gummi bears. Ice cream bear claw icing macaroon apple pie caramels. Sugar plum applicake candy canes sesame snaps I love. Sugar plum brownie biscuit tiramisu marzipan. Ice cream I love sweet bear claw I love sweet cake tart. Danish marshmallow I love wypas pastry. Chocolate tart macaroon wypas sesame snaps apple pie chocolate sesame snaps. Cotton candy sweet roll pudding oat cake I love marzipan wafer chocolate cake.</p>
</div>
</li>
<li>
<h4 class="cbp-nttrigger">Lollipop liquorice</h4>
<div class="cbp-ntcontent">
<p>Cookie ice cream sweet I love cupcake. Fruitcake topping wafer. Lollipop liquorice I love tart wypas biscuit. Danish jelly-o gingerbread. Faworki jelly pastry. Wypas wypas topping I love I love candy canes liquorice. I love sweet roll fruitcake dragée wafer icing bonbon.</p>
</div>
</li>
</ul>
</div>
</li>
</ul>
</div>
</div>
<script src="js/jquery-1.9.1.js"></script>
<script src="js/jquery.cbpNTAccordion.min.js"></script>
<script>
$( function() {
/*
- how to call the plugin:
$( selector ).cbpNTAccordion( [options] );
- destroy:
$( selector ).cbpNTAccordion( 'destroy' );
*/
$( '#cbp-ntaccordion' ).cbpNTAccordion();
} );
</script>
</body>
</html>
JS代码(jquery.cbpNTAccordion.min.js):
/** * jquery.cbpNTAccordion.min.js v1.0.0 * http://www.codrops.com * * Licensed under the MIT license. * http://www.opensource.org/licenses/mit-license.php * * Copyright 2013,Codrops * http://www.codrops.com */
(function(d,b,e){
var c=d("html,body");
d.CBPNTAccordion=function(f,g){
this.$el=d(g);
this._init(f)}
;
d.CBPNTAccordion.defaults={
}
;
d.CBPNTAccordion.prototype={
_init:function(f){
this.options=d.extend(true,{
}
,d.CBPNTAccordion.defaults,f);
this._config();
this._initEvents()}
,_config:function(){
this.$items=this.$el.find(".cbp-nttrigger")}
,_initEvents:function(){
this.$items.on("click.cbpNTAccordion",function(){
var f=d(this).parent();
if(f.hasClass("cbp-ntopen")){
f.removeClass("cbp-ntopen")}
else{
f.addClass("cbp-ntopen");
c.scrollTop(f.offset().top)}
}
)}
,destroy:function(){
this.$items.off(".cbpNTAccordion").parent().removeClass("cbp-ntopen")}
}
;
var a=function(f){
if(b.console){
b.console.error(f)}
}
;
d.fn.cbpNTAccordion=function(g){
if(typeof g==="string"){
var f=Array.prototype.slice.call(arguments,1);
this.each(function(){
var h=d.data(this,"cbpNTAccordion");
if(!h){
a("cannot call methods on cbpNTAccordion prior to initialization;
attempted to call method '"+g+"'");
return}
if(!d.isFunction(h[g])||g.charAt(0)==="_"){
a("no such method '"+g+"' for cbpNTAccordion instance");
return}
h[g].apply(h,f)}
)}
else{
this.each(function(){
var h=d.data(this,"cbpNTAccordion");
if(h){
h._init()}
else{
h=d.data(this,"cbpNTAccordion",new d.CBPNTAccordion(g,this))}
}
)}
return this}
}
)(jQuery,window);
JS代码(modernizr.custom.js):
/* Modernizr 2.6.2 (Custom Build) | MIT & BSD * Build:http://modernizr.com/download/#-shiv-cssclasses-load */
;
window.Modernizr=function(a,b,c){
function u(a){
j.cssText=a}
function v(a,b){
return u(prefixes.join(a+";
")+(b||""))}
function w(a,b){
return typeof a===b}
function x(a,b){
return!!~(""+a).indexOf(b)}
function y(a,b,d){
for(var e in a){
var f=b[a[e]];
if(f!==c)return d===!1?a[e]:w(f,"function")?f.bind(d||b):f}
return!1}
var d="2.6.2",e={
}
,f=!0,g=b.documentElement,h="modernizr",i=b.createElement(h),j=i.style,k,l={
}
.toString,m={
}
,n={
}
,o={
}
,p=[],q=p.slice,r,s={
}
.hasOwnProperty,t;
!w(s,"undefined")&&!w(s.call,"undefined")?t=function(a,b){
return s.call(a,b)}
:t=function(a,b){
return b in a&&w(a.constructor.prototype[b],"undefined")}
,Function.prototype.bind||(Function.prototype.bind=function(b){
var c=this;
if(typeof c!="function")throw new TypeError;
var d=q.call(arguments,1),e=function(){
if(this instanceof e){
var a=function(){
}
;
a.prototype=c.prototype;
var f=new a,g=c.apply(f,d.concat(q.call(arguments)));
return Object(g)===g?g:f}
return c.apply(b,d.concat(q.call(arguments)))}
;
return e}
);
for(var z in m)t(m,z)&&(r=z.toLowerCase(),e[r]=m[z](),p.push((e[r]?"":"no-")+r));
return e.addTest=function(a,b){
if(typeof a=="object")for(var d in a)t(a,d)&&e.addTest(d,a[d]);
else{
a=a.toLowerCase();
if(e[a]!==c)return e;
b=typeof b=="function"?b():b,typeof f!="undefined"&&f&&(g.className+=" "+(b?"":"no-")+a),e[a]=b}
return e}
,u(""),i=k=null,function(a,b){
function k(a,b){
var c=a.createElement("p"),d=a.getElementsByTagName("head")[0]||a.documentElement;
return c.innerHTML="x<style>"+b+"</style>",d.insertBefore(c.lastChild,d.firstChild)}
function l(){
var a=r.elements;
return typeof a=="string"?a.split(" "):a}
function m(a){
var b=i[a[g]];
return b||(b={
}
,h++,a[g]=h,i[h]=b),b}
function n(a,c,f){
c||(c=b);
if(j)return c.createElement(a);
f||(f=m(c));
var g;
return f.cache[a]?g=f.cache[a].cloneNode():e.test(a)?g=(f.cache[a]=f.createElem(a)).cloneNode():g=f.createElem(a),g.canHaveChildren&&!d.test(a)?f.frag.appendChild(g):g}
function o(a,c){
a||(a=b);
if(j)return a.createDocumentFragment();
c=c||m(a);
var d=c.frag.cloneNode(),e=0,f=l(),g=f.length;
for(;
e<g;
e++)d.createElement(f[e]);
return d}
function p(a,b){
b.cache||(b.cache={
}
,b.createElem=a.createElement,b.createFrag=a.createDocumentFragment,b.frag=b.createFrag()),a.createElement=function(c){
return r.shivMethods?n(c,a,b):b.createElem(c)}
,a.createDocumentFragment=Function("h,f","return function(){
var n=f.cloneNode(),c=n.createElement;
h.shivMethods&&("+l().join().replace(/\w+/g,function(a){
return b.createElem(a),b.frag.createElement(a),'c("'+a+'")'}
)+");
return n}
")(r,b.frag)}
function q(a){
a||(a=b);
var c=m(a);
return r.shivCSS&&!f&&!c.hasCSS&&(c.hasCSS=!!k(a,"article,aside,figcaption,figure,footer,header,hgroup,nav,section{
display:block}
mark{
background:#FF0;
color:#000}
")),j||p(a,c),a}
var c=a.html5||{
}
,d=/^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,e=/^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i,f,g="_html5shiv",h=0,i={
}
,j;
(function(){
try{
var a=b.createElement("a");
a.innerHTML="<xyz></xyz>",f="hidden"in a,j=a.childNodes.length==1||function(){
b.createElement("a");
var a=b.createDocumentFragment();
return typeof a.cloneNode=="undefined"||typeof a.createDocumentFragment=="undefined"||typeof a.createElement=="undefined"}
()}
catch(c){
f=!0,j=!0}
}
)();
var r={
elements:c.elements||"abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup mark meter nav output progress section summary time video",shivCSS:c.shivCSS!==!1,supportsUnknownElements:j,shivMethods:c.shivMethods!==!1,type:"default",shivDocument:q,createElement:n,createDocumentFragment:o}
;
a.html5=r,q(b)}
(this,b),e._version=d,g.className=g.className.replace(/(^|\s)no-js(\s|$)/,"$1$2")+(f?" js "+p.join(" "):""),e}
(this,this.document),function(a,b,c){
function d(a){
return"[object Function]"==o.call(a)}
function e(a){
return"string"==typeof a}
function f(){
}
function g(a){
return!a||"loaded"==a||"complete"==a||"uninitialized"==a}
function h(){
var a=p.shift();
q=1,a?a.t?m(function(){
("c"==a.t?B.injectCss:B.injectJs)(a.s,0,a.a,a.x,a.e,1)}
,0):(a(),h()):q=0}
function i(a,c,d,e,f,i,j){
function k(b){
if(!o&&g(l.readyState)&&(u.r=o=1,!q&&h(),l.onload=l.onreadystatechange=null,b)){
"img"!=a&&m(function(){
t.removeChild(l)}
,50);
for(var d in y[c])y[c].hasOwnProperty(d)&&y[c][d].onload()}
}
var j=j||B.errorTimeout,l=b.createElement(a),o=0,r=0,u={
t:d,s:c,e:f,a:i,x:j}
;
1===y[c]&&(r=1,y[c]=[]),"object"==a?l.data=c:(l.src=c,l.type=a),l.width=l.height="0",l.onerror=l.onload=l.onreadystatechange=function(){
k.call(this,r)}
,p.splice(e,0,u),"img"!=a&&(r||2===y[c]?(t.insertBefore(l,s?null:n),m(k,j)):y[c].push(l))}
function j(a,b,c,d,f){
return q=0,b=b||"j",e(a)?i("c"==b?v:u,a,b,this.i++,c,d,f):(p.splice(this.i++,0,a),1==p.length&&h()),this}
function k(){
var a=B;
return a.loader={
load:j,i:0}
,a}
var l=b.documentElement,m=a.setTimeout,n=b.getElementsByTagName("script")[0],o={
}
.toString,p=[],q=0,r="MozAppearance"in l.style,s=r&&!!b.createRange().compareNode,t=s?l:n.parentNode,l=a.opera&&"[object Opera]"==o.call(a.opera),l=!!b.attachEvent&&!l,u=r?"object":l?"script":"img",v=l?"script":u,w=Array.isArray||function(a){
return"[object Array]"==o.call(a)}
,x=[],y={
}
,z={
timeout:function(a,b){
return b.length&&(a.timeout=b[0]),a}
}
,A,B;
B=function(a){
function b(a){
var a=a.split("!"),b=x.length,c=a.pop(),d=a.length,c={
url:c,origUrl:c,prefixes:a}
,e,f,g;
for(f=0;
f<d;
f++)g=a[f].split("="),(e=z[g.shift()])&&(c=e(c,g));
for(f=0;
f<b;
f++)c=x[f](c);
return c}
function g(a,e,f,g,h){
var i=b(a),j=i.autoCallback;
i.url.split(".").pop().split("?").shift(),i.bypass||(e&&(e=d(e)?e:e[a]||e[g]||e[a.split("/").pop().split("?")[0]]),i.instead?i.instead(a,e,f,g,h):(y[i.url]?i.noexec=!0:y[i.url]=1,f.load(i.url,i.forceCSS||!i.forceJS&&"css"==i.url.split(".").pop().split("?").shift()?"c":c,i.noexec,i.attrs,i.timeout),(d(e)||d(j))&&f.load(function(){
k(),e&&e(i.origUrl,h,g),j&&j(i.origUrl,h,g),y[i.url]=2}
)))}
function h(a,b){
function c(a,c){
if(a){
if(e(a))c||(j=function(){
var a=[].slice.call(arguments);
k.apply(this,a),l()}
),g(a,j,b,0,h);
else if(Object(a)===a)for(n in m=function(){
var b=0,c;
for(c in a)a.hasOwnProperty(c)&&b++;
return b}
(),a)a.hasOwnProperty(n)&&(!c&&!--m&&(d(j)?j=function(){
var a=[].slice.call(arguments);
k.apply(this,a),l()}
:j[n]=function(a){
return function(){
var b=[].slice.call(arguments);
a&&a.apply(this,b),l()}
}
(k[n])),g(a[n],j,b,n,h))}
else!c&&l()}
var h=!!a.test,i=a.load||a.both,j=a.callback||f,k=j,l=a.complete||f,m,n;
c(h?a.yep:a.nope,!!i),i&&c(i)}
var i,j,l=this.yepnope.loader;
if(e(a))g(a,0,l,0);
else if(w(a))for(i=0;
i<a.length;
i++)j=a[i],e(j)?g(j,0,l,0):w(j)?B(j):Object(j)===j&&h(j,l);
else Object(a)===a&&h(a,l)}
,B.addPrefix=function(a,b){
z[a]=b}
,B.addFilter=function(a){
x.push(a)}
,B.errorTimeout=1e4,null==b.readyState&&b.addEventListener&&(b.readyState="loading",b.addEventListener("DOMContentLoaded",A=function(){
b.removeEventListener("DOMContentLoaded",A,0),b.readyState="complete"}
,0)),a.yepnope=k(),a.yepnope.executeStack=h,a.yepnope.injectJs=function(a,c,d,e,i,j){
var k=b.createElement("script"),l,o,e=e||B.errorTimeout;
k.src=a;
for(o in d)k.setAttribute(o,d[o]);
c=j?h:c||f,k.onreadystatechange=k.onload=function(){
!l&&g(k.readyState)&&(l=1,c(),k.onload=k.onreadystatechange=null)}
,m(function(){
l||(l=1,c(1))}
,e),i?k.onload():n.parentNode.insertBefore(k,n)}
,a.yepnope.injectCss=function(a,c,d,e,g,i){
var e=b.createElement("link"),j,c=i?h:c||f;
e.href=a,e.rel="stylesheet",e.type="text/css";
for(j in d)e.setAttribute(j,d[j]);
g||(n.parentNode.insertBefore(e,n),m(c,0))}
}
(this,document),Modernizr.load=function(){
yepnope.apply(window,[].slice.call(arguments,0))}
;
CSS代码(component.css):
/* Icon font for arrow icons */
@font-face{font-family:'icomoon';src:url('../fonts/icomoon_arrows/icomoon.eot');src:url('../fonts/icomoon_arrows/icomoon.eot?#iefix') format('embedded-opentype'),url('../fonts/icomoon_arrows/icomoon.woff') format('woff'),url('../fonts/icomoon_arrows/icomoon.ttf') format('truetype'),url('../fonts/icomoon_arrows/icomoon.svg#icomoon') format('svg');font-weight:normal;font-style:normal;}
/* Iconfont by Icomoon http://icomoon.io/ */
/* Accordion style */
.cbp-ntaccordion{list-style:none;margin:0;padding:0;}
.cbp-ntsubaccordion{list-style:none;}
.cbp-ntaccordion .cbp-nttrigger{cursor:pointer;}
.cbp-ntaccordion h3{margin:0 0 0.3em;padding:1em 0 0.5em;border-bottom:1px solid #ddd;font-size:2.75em;font-weight:300;}
.cbp-ntaccordion h4{font-size:1.2em;text-transform:uppercase;letter-spacing:0.4em;padding:0.5em 0 0.5em;margin:0 0 0.5em;}
.cbp-ntaccordion h5{font-size:1.2em;color:#aaa;padding:0.5em 0 0.5em;margin:0 0 0.5em;}
.cbp-ntaccordion .cbp-ntcontent p{color:#888;font-size:1.25em;font-weight:300;line-height:1.5;padding:0.2em 0 1.5em;margin:0;}
/* Arrow icons */
.cbp-ntaccordion > li > .cbp-nttrigger:before,.cbp-ntsubaccordion > li > .cbp-nttrigger:before{font-family:'icomoon';speak:none;font-weight:normal;font-variant:normal;text-transform:none;line-height:1;color:#ddd;margin-right:0.5em;-webkit-font-smoothing:antialiased;}
.cbp-ntaccordion > li > .cbp-nttrigger:before{font-size:75%;}
.cbp-ntaccordion > li > .cbp-nttrigger:before{content:"\36";}
.cbp-ntaccordion > li > .cbp-nttrigger:hover:before{content:"\35";color:inherit;}
.cbp-ntaccordion > li.cbp-ntopen > .cbp-nttrigger:before,.no-js .cbp-ntaccordion > li > .cbp-nttrigger:before{content:"\34";color:inherit;}
.cbp-ntsubaccordion > li > .cbp-nttrigger:before{content:"\32";}
.cbp-ntsubaccordion > li > .cbp-nttrigger:hover:before{content:"\33";color:inherit;}
.cbp-ntsubaccordion > li.cbp-ntopen > .cbp-nttrigger:before,.no-js .cbp-ntsubaccordion > li > .cbp-nttrigger:before{content:"\31";color:inherit;}
/* Initial height is zero */
.cbp-ntaccordion .cbp-ntcontent{height:0;overflow:hidden;}
/* When open,set height to auto */
.cbp-ntaccordion .cbp-ntopen > .cbp-ntcontent,.cbp-ntsubaccordion .cbp-ntopen > .cbp-ntcontent,.no-js .cbp-ntaccordion .cbp-ntcontent{height:auto;}
/* Example for media query */
@media screen and (max-width:32em){.cbp-ntaccordion{font-size:70%;}
}
CSS代码(default.css):
/* General Demo Style */
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);@font-face{font-family:'fontawesome';src:url('../fonts/fontawesome.eot');src:url('../fonts/fontawesome.eot?#iefix') format('embedded-opentype'),url('../fonts/fontawesome.svg#fontawesome') format('svg'),url('../fonts/fontawesome.woff') format('woff'),url('../fonts/fontawesome.ttf') format('truetype');font-weight:normal;font-style:normal;}
body,html{font-size:100%;padding:0;margin:0;}
/* Reset */
*,*:after,*:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
/* Clearfix hack by Nicolas Gallagher:http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,.clearfix:after{content:" ";display:table;}
.clearfix:after{clear:both;}
body{font-family:'Lato',Calibri,Arial,sans-serif;color:#47a3da;}
a{color:#f0f0f0;text-decoration:none;}
a:hover{color:#000;}
.main,.container > header{width:90%;max-width:70em;margin:0 auto;padding:0 1.875em 3.125em 1.875em;}
.container > header{padding:2.875em 1.875em 1.875em;}
.container > header h1{font-size:2.125em;line-height:1.3;margin:0;float:left;font-weight:400;}
.container > header span{display:block;font-weight:700;text-transform:uppercase;letter-spacing:0.5em;padding:0 0 0.6em 0.1em;}
.container > header nav{float:right;}
.container > header nav a{display:block;float:left;position:relative;width:2.5em;height:2.5em;background:#fff;border-radius:50%;color:transparent;margin:0 0.1em;border:4px solid #47a3da;text-indent:-8000px;}
.container > header nav a:after{content:attr(data-info);color:#47a3da;position:absolute;width:600%;top:120%;text-align:right;right:0;opacity:0;pointer-events:none;}
.container > header nav a:hover:after{opacity:1;}
.container > header nav a:hover{background:#47a3da;}
.icon-drop:before,.icon-arrow-left:before{font-family:'fontawesome';position:absolute;top:0;width:100%;height:100%;speak:none;font-style:normal;font-weight:normal;line-height:2;text-align:center;color:#47a3da;-webkit-font-smoothing:antialiased;text-indent:8000px;padding-left:8px;}
.container > header nav a:hover:before{color:#fff;}
.icon-drop:before{content:"\e000";}
.icon-arrow-left:before{content:"\f060";}
分享到QQ
分享到微博
微信扫一扫
