可折叠抽屉破

Question

今天又有一个问题。我正试图现在弄清楚如何实现可折叠的抽屉。正如所示：http://codepen.io/nodws/pen/lahqf我只想使用创作者的透明。

我剪掉了大部分不必要的代码，它自己运行良好，但是当我将它放入我的网站时，它停止工作。我想知道是否有其他事情导致它破裂。

我的尝试是在这里： http://codepen.io/Dingerzat/pen/QGbWKK

CSS

/* =Reset default browser CSS. Based on work by Eric Meyer: http://meyerweb.com/eric/tools/css/reset/index.html 
-------------------------------------------------------------- */ 
html, body, div, span, applet, object, iframe, 
h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
a, abbr, acronym, address, big, cite, code, 
del, dfn, em, font, img, ins, kbd, q, s, samp, 
small, strike, strong, sub, sup, tt, var, 
b, u, i, center, 
dl, dt, dd, ol, ul, li, 
fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td { 
    background: transparent; 
    border: 0; 
    margin: 0; 
    padding: 0; 
    vertical-align: baseline; } 

body { 
    line-height: 1; } 

h1, h2, h3, h4, h5, h6 { 
    clear: both; 
    font-weight: normal; } 

ol, ul { 
    list-style: none; } 

blockquote { 
    quotes: none; } 

blockquote:before, blockquote:after { 
    content: ''; 
    content: none; } 

del { 
    text-decoration: line-through; } 

/* tables still need 'cellspacing="0"' in the markup */ 
table { 
    border-collapse: collapse; 
    border-spacing: 0; } 

a img { 
    border: none; } 

/* =Scss Variables 
-------------------------------------------------------------- */ 
/* =Global 
-------------------------------------------------------------- */ 
*, 
*:before, 
*:after { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; } 

body { 
    background-color: #3cb5f9; 
    color: #505050; 
    font-family: "Ubuntu", sans-serif; 
    font-weight: 300; 
    font-size: 16px; 
    line-height: 1.8; } 

/* Headings */ 
h1, h2, h3, h4, h5, h6 { 
    line-height: 1; 
    font-weight: 300; } 

a { 
    text-decoration: none; 
    color: #3cb5f9; } 

a:hover { 
    color: #0793e2; } 

/* =Template 
-------------------------------------------------------------- */ 
#wrapper { 
    width: 100%; 
    margin: 0 auto; } 

#main { 
    background-color: #ffffff; 
    padding-top: 150px; } 

.container { 
    width: 80%; 
    margin: 0 auto; 
    padding: 0 30px; } 

.containertwo { 
    width: 86%; 
    margin: 0 auto; 
    padding: 0 30px; } 
.containertwo h3 { 
    font-size: 30px; 
    text-align: center; 
} 

section { 
    padding: 60px 0; } 
    section h1 { 
    font-weight: 700; 
    margin-bottom: 10px; } 
    section p { 
    margin-bottom: 30px; } 
    section p:last-child { 
     margin-bottom: 0; } 
    section.color { 
    background-color: #d51c84; 
    color: white; } 

/* =Info Bar 
-------------------------------------------------------------- */ 
#info-bar { 
    background-color: #000000; } 
    #info-bar a { 
    color: white; 
    font-size: 14px; 
    text-transform: uppercase; 
    display: inline-block; 
    margin: 0; 
    padding: 10px; } 
    #info-bar a:hover { 
     background-color: #0793e2; } 
    #info-bar span.all-tutorials, 
    #info-bar span.back-to-tutorial { 
    display: block; 
    width: 50%; } 
    #info-bar span.all-tutorials { 
    float: left; 
    text-align: left; } 
    #info-bar span.back-to-tutorial { 
    float: right; 
    text-align: right; } 

/* =Header 
-------------------------------------------------------------- */ 
#logo img {height: 40%;} 

header { 
    width: 100%; 
    height: 150px; 
    overflow: hidden; 
    position: fixed; 
    top: 0; 
    left: 0; 
    z-index: 999; 
    background-color: #000000; 
    -webkit-transition: height 0.3s; 
    -moz-transition: height 0.3s; 
    -ms-transition: height 0.3s; 
    -o-transition: height 0.3s; 
    transition: height 0.3s; } 
    header h1#logo { 
    display: inline-block; 
    height: 150px; 
    line-height: 150px; 
    float: left; 
    font-family: "Oswald", sans-serif; 
    font-size: 60px; 
    color: white; 
    font-weight: 400; 
    -webkit-transition: all 0.3s; 
    -moz-transition: all 0.3s; 
    -ms-transition: all 0.3s; 
    -o-transition: all 0.3s; 
    transition: all 0.3s; } 
    header nav { 
    display: inline-block; 
    float: right; } 
    header nav a { 
     line-height: 150px; 
     margin-left: 20px; 
     color: #ffffff; 
     font-weight: 700; 
     font-size: 18px; 
     -webkit-transition: all 0.3s; 
     -moz-transition: all 0.3s; 
     -ms-transition: all 0.3s; 
     -o-transition: all 0.3s; 
     transition: all 0.3s; } 
     header nav a:hover { 
     color: white; } 
    header.smaller { 
    height: 75px; } 
    header.smaller h1#logo { 
     width: 150px; 
     height: 75px; 
     line-height: 75px; 
     font-size: 30px; } 
    header.smaller nav a { 
     line-height: 75px; } 

/* =Footer 
-------------------------------------------------------------- */ 


*, *:before, *:after{ 
    box-sizing: border-box; 
    color: #242424; 
    padding: 20; margin: 30; 
} 

html, body{background: rgb(0, 0, 0);} 

.content{ 
    margin: auto; 
    margin-bottom: 350px; /* Same height as footer */ 
} 

.fixed_footer{ 
    width: 100%; 
    height: 350px; 
    background: #000000; 
    position: fixed; left: 0; bottom: 0; 
    z-index: -100; 
    padding:100px 5px; 
} 
    .fixed_footer p{ 
    color: #696969; 
    column-count: 2; 
    column-gap: 50px; 
    font-size: 1em; 
    font-weight: 300; 
} 
/* =Extras 
-------------------------------------------------------------- */ 
.clearfix:after { 
    visibility: hidden; 
    display: block; 
    content: ""; 
    clear: both; 
    height: 0; } 

/* =Media Queries 
-------------------------------------------------------------- */ 
@media all and (max-width: 660px) { 
    /* =Header 
    -------------------------------------------------------------- */ 
    header h1#logo { 
    display: block; 
    float: none; 
    margin: 0 auto; 
    height: 100px; 
    line-height: 100px; 
    text-align: center; } 
    header nav { 
    display: block; 
    float: none; 
    height: 50px; 
    text-align: center; 
    margin: 0 auto; } 
    header nav a { 
     line-height: 50px; 
     margin: 0 10px; } 
    header.smaller { 
    height: 75px; } 
    header.smaller h1#logo { 
     height: 40px; 
     line-height: 40px; 
     font-size: 30px; } 
    header.smaller nav { 
     height: 35px; } 
     header.smaller nav a { 
     line-height: 35px; } } 
@media all and (max-width: 600px) { 
    .container { 
    width: 100%; } 

    #info-bar a { 
    display: block; } 
    #info-bar span.all-tutorials, 
    #info-bar span.back-to-tutorial { 
    width: 100%; } 
    #info-bar span.all-tutorials, 
    #info-bar span.back-to-tutorial { 
    float: none; 
    text-align: center; } 
    #info-bar span.all-tutorials { 
    border-bottom: solid 1px #0793e2; } } 

html, 
body { 
    margin: 0; 
    height: 100%; 
} 

section { 
    position: relative; 
    height: 100%; 
    background-attachment: fixed; 
    background-size: cover !important; 
    background-position: center; 
    background-blend-mode: screen; 
    /* &:nth-of-type(1) */ 
} 
section h1 { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    font-size: 50px; 
    color: #fff; 
    width: 100%; 
    text-align: center; 
} 
section:nth-of-type(1) { 
    /* .paralax-1 */ 
} 
section:nth-of-type(1) .paralax-1 { 
    height: 100%; 
    width: 100%; 
    position: relative; 
    overflow: hidden; 
    /* .new-paralax */ 
} 
section:nth-of-type(1) .paralax-1 .new-paralax { 
    z-index: -100000; 
    transform: translateZ(-8000px) scale(0.4); 
    background-attachment: fixed; 
    background-size: cover !important; 
    background-position: center; 
    background-blend-mode: screen; 
    height: 100%; 
    width: 100%; 
    position: relative; 
    transform: scale(1.3); 
    background-color: #ffffff; 
    background-image: url("https://visualhunt.com/photos/xl/2/aerial-view-of-coffee-cup-on-wooden-table.jpg"); 
} 
section:nth-of-type(2) { 
    height: 20em; 
    background-image: url("http://www.maximiles.co.uk/images/dynamics/uk/email_images/ftpIMAGES2014/iStock_000068237701_Full-edited.jpg"); 
} 
section:nth-of-type(3) { 
    background-color: white; 
} 
section:nth-of-type(4) { 
    background-image: url("https://visualhunt.com/photos/xl/2/sport-gymnastics-frog-funny-fitness-fit-sporty-1.jpg"); 
} 
section:nth-of-type(5) { 
    background-color: white; 
} 
.collapse { 
    background-color: rgba(255,255,255,0); 
    border-bottom: 1px solid #eee; 
    cursor: pointer; 
    color: #fff; 
    padding: 10px; 
    margin:0px; 
    max-height:40px; 
    overflow:hidden; 
    transition: all 0.4s; 
} 
.collapse * { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 

} 
.collapse.active { 
    background-color: rgba(255,255,255,0.9); 
    box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2); 
    z-index: 200; 
    color:#444; 
    max-height:3000px; 
    padding:10px 20px; 
    margin: 10px -10px; 
    transition: all 0.2s,max-height 4.8s; 
} 
.collapse h2 { 
    font-size: 18px; 
    line-height: 20px; 
    position:relative 
} 
.transparent{ 
    background-color: rgba(255,255,255,0) !important; 
    color:#fff !important; 
    box-shadow:none !important; 
    margin:0px !important; 
    padding:10px !important 
} 
.collapse h2::after{ 
    content: "+"; 
    text-align:center; 
    position:absolute; 
    width:15px; 
    height:15px; 
    border:1px solid #ccc; 
    border-radius:50%; 
    font-size:12px; 
    line-height:15px; 
    opacity:0.5; 
    right:0; 
    top:0; 
} 
.collapse:hover h2::after{ 
    opacity:1 
} 

.collapse.active h2::after{ 
    content: "-"; 
} 

JS

/*! 
* classie v1.0.0 
* class helper functions 
* from bonzo https://github.com/ded/bonzo 
* MIT license 
* 
* classie.has(elem, 'my-class') -> true/false 
* classie.add(elem, 'my-new-class') 
* classie.remove(elem, 'my-unwanted-class') 
* classie.toggle(elem, 'my-class') 
*/ 

/*jshint browser: true, strict: true, undef: true, unused: true */ 
/*global define: false */ 

(function(window) { 

'use strict'; 

// class helper functions from bonzo https://github.com/ded/bonzo 

function classReg(className) { 
    return new RegExp("(^|\\s+)" + className + "(\\s+|$)"); 
} 

// classList support for class management 
// altho to be fair, the api sucks because it won't accept multiple classes at once 
var hasClass, addClass, removeClass; 

if ('classList' in document.documentElement) { 
    hasClass = function(elem, c) { 
    return elem.classList.contains(c); 
    }; 
    addClass = function(elem, c) { 
    elem.classList.add(c); 
    }; 
    removeClass = function(elem, c) { 
    elem.classList.remove(c); 
    }; 
} 
else { 
    hasClass = function(elem, c) { 
    return classReg(c).test(elem.className); 
    }; 
    addClass = function(elem, c) { 
    if (!hasClass(elem, c)) { 
     elem.className = elem.className + ' ' + c; 
    } 
    }; 
    removeClass = function(elem, c) { 
    elem.className = elem.className.replace(classReg(c), ' '); 
    }; 
} 

function toggleClass(elem, c) { 
    var fn = hasClass(elem, c) ? removeClass : addClass; 
    fn(elem, c); 
} 

var classie = { 
    // full names 
    hasClass: hasClass, 
    addClass: addClass, 
    removeClass: removeClass, 
    toggleClass: toggleClass, 
    // short names 
    has: hasClass, 
    add: addClass, 
    remove: removeClass, 
    toggle: toggleClass 
}; 

// transport 
if (typeof define === 'function' && define.amd) { 
    // AMD 
    define(classie); 
} else { 
    // browser global 
    window.classie = classie; 
} 

})(window); 

$('.collapse').on('click',function(e){ 
    e.preventDefault(); 
    $(this).toggleClass('active'); 
}); 

HTML

<!-- title and meta --> 
<meta charset="utf-8" /> 
<meta name="viewport" content="width=device-width,initial-scale=1.0" /> 
<meta name="description" content="" /> 
<title>Header Resize On Scroll with Animations</title> 

<!-- css --> 
<link href='http://fonts.googleapis.com/css?family=Ubuntu:300,400,700,400italic' rel='stylesheet' type='text/css'> 
<link href='http://fonts.googleapis.com/css?family=Oswald:400,300,700' rel='stylesheet' type='text/css'> 
<link rel="stylesheet" href="css/style.css" /> 

<!-- js --> 
<script src="js/classie.js"></script> 
<script> 
    function init() { 
     window.addEventListener('scroll', function(e){ 
      var distanceY = window.pageYOffset || document.documentElement.scrollTop, 
       shrinkOn = 300, 
       header = document.querySelector("header"); 
      if (distanceY > shrinkOn) { 
       classie.add(header,"smaller"); 
      } else { 
       if (classie.has(header,"smaller")) { 
        classie.remove(header,"smaller"); 
       } 
      } 
     }); 
    } 
    window.onload = init(); 
</script> 
</head> 



<body> 

<div id="wrapper"> 

<header> 
    <div class="container clearfix"> 
     <h1 id="logo"> 
      <img src="http://www.maximiles.co.uk/images/dynamics/uk/email_images/ftpIMAGES2014/bilendi-logo-trans.png"> 
     </h1> 
     <nav> 
      <a href="">Lorem</a> 
      <a href="">Ipsum</a> 
      <a href="">Dolor</a> 
     </nav> 
    </div> 
</header><!-- /header --> 
    <div id="main"> 
    <div id="content"> 
    <main class="content" role="main"> 

     <section> 
      <div class="container"> 
       <h2>Services for Market Research</h2><br> 
       <p>Cupcake ipsum dolor sit amet lollipop. Macaroon candy cotton candy bear claw macaroon carrot cake pastry icing dessert. Cupcake pastry tart sesame snaps lollipop donut pie. Cookie apple pie toffee lemon drops jelly beans cheesecake sweet roll. Jelly-o soufflé donut candy canes wafer dragée sweet cheesecake. Macaroon caramels pie cookie gummi bears. Ice cream jelly-o toffee cookie gingerbread cookie. Soufflé fruitcake jelly-o jelly chupa chups jelly beans. Dragée marzipan pastry macaroon oat cake muffin soufflé topping liquorice. Jelly-o chocolate cake lollipop.</p> 
       <p>Sugar plum muffin cookie pastry oat cake icing candy canes chocolate. Gummi bears chupa chups fruitcake dessert jelly. Muffin cookie ice cream soufflé pastry lollipop gingerbread sweet. Unerdwear.com bonbon candy marzipan bonbon gummies chocolate cake gummi bears powder. Unerdwear.com tart halvah chocolate cake dragée liquorice. Sugar plum chocolate bar pastry liquorice dragée jelly powder. Jelly tootsie roll applicake caramels. Marzipan candy tootsie roll donut. Gummies ice cream macaroon applicake.</p> 
       <div class="collapse transparent"> 
    <h2>I am transparent</h2> 
    The brain is like a muscle. When it is in use we feel very good. Understanding is joyous. 
    <b>Carl Sagan</b> 
    <p>This one keeps the transparency</p> 
    </div> 
       <p> 
        <a href="http://www.bilendi.co.uk">&laquo; Want to know more?</a><br> 
        <a href="http://www.bilendi.co.uk">&laquo; Become a citizen!</a> 
       </p> 
      </div> 
     </section> 
     <section class="color"> 
      <div class="container"> 
       <h1>Cupcakes for the people!</h1> 
      </div> 
     </section> 
     <section class="color"> 
      <div class="container"> 
       <p>Cupcake ipsum dolor sit amet lollipop. Macaroon candy cotton candy bear claw macaroon carrot cake pastry icing dessert. Cupcake pastry tart sesame snaps lollipop donut pie. Cookie apple pie toffee lemon drops jelly beans cheesecake sweet roll. Jelly-o soufflé donut candy canes wafer dragée sweet cheesecake. Macaroon caramels pie cookie gummi bears. Ice cream jelly-o toffee cookie gingerbread cookie. Soufflé fruitcake jelly-o jelly chupa chups jelly beans. Dragée marzipan pastry macaroon oat cake muffin soufflé topping liquorice. Jelly-o chocolate cake lollipop.</p> 
       <p>Sugar plum muffin cookie pastry oat cake icing candy canes chocolate. Gummi bears chupa chups fruitcake dessert jelly. Muffin cookie ice cream soufflé pastry lollipop gingerbread sweet. Unerdwear.com bonbon candy marzipan bonbon gummies chocolate cake gummi bears powder. Unerdwear.com tart halvah chocolate cake dragée liquorice. Sugar plum chocolate bar pastry liquorice dragée jelly powder. Jelly tootsie roll applicake caramels. Marzipan candy tootsie roll donut. Gummies ice cream macaroon applicake.</p> 
      </div> 
     </section> 
     <section> 
      <div class="container"> 
       <h1>Sugar rush, oh my...</h1> 
       <p>Cupcake ipsum dolor sit amet lollipop. Macaroon candy cotton candy bear claw macaroon carrot cake pastry icing dessert. Cupcake pastry tart sesame snaps lollipop donut pie. Cookie apple pie toffee lemon drops jelly beans cheesecake sweet roll. Jelly-o soufflé donut candy canes wafer dragée sweet cheesecake. Macaroon caramels pie cookie gummi bears. Ice cream jelly-o toffee cookie gingerbread cookie. Soufflé fruitcake jelly-o jelly chupa chups jelly beans. Dragée marzipan pastry macaroon oat cake muffin soufflé topping liquorice. Jelly-o chocolate cake lollipop.</p> 
       <p>Sugar plum muffin cookie pastry oat cake icing candy canes chocolate. Gummi bears chupa chups fruitcake dessert jelly. Muffin cookie ice cream soufflé pastry lollipop gingerbread sweet. Unerdwear.com bonbon candy marzipan bonbon gummies chocolate cake gummi bears powder. Unerdwear.com tart halvah chocolate cake dragée liquorice. Sugar plum chocolate bar pastry liquorice dragée jelly powder. Jelly tootsie roll applicake caramels. Marzipan candy tootsie roll donut. Gummies ice cream macaroon applicake.</p> 
      </div> 
     </section> 
     <section> 
      <div class="containertwo"> 
       <h3>Enquire</h2> 
       <script type="text/javascript" src="https://bilendi.formstack.com/forms/js.php/bilendi_test_2"></script><noscript><a href="https://bilendi.formstack.com/forms/bilendi_test_2" title="Online Form">Online Form - BILENDI TEST 2</a></noscript><div style="text-align:right; font-size:x-small;"><a href="http://www.formstack.com?utm_source=jsembed&utm_medium=product&utm_campaign=product+branding&fa=h,2521222" title="HTML Form Builder">HTML Form Builder</a></div> 
     </div> 
       </section> 
    </main></div> 
</div><!-- #main --> 


<footer class="fixed_footer"> 
    <div class=" container content"> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis ducimus nemo quo totam neque quis soluta nisi obcaecati aliquam saepe dicta adipisci blanditiis quaerat earum laboriosam accusamus nesciunt! Saepe ex maxime enim asperiores nisi. Obcaecati nostrum nobis laudantium aliquam commodi veniam magni similique ullam quis pariatur voluptatem harum id error.</p> 
    </div> 
</footer> 



</div><!-- /#wrapper --> 

</body> 
</html> 

Answer 1

不知何故pastin将我的代码直接放入可折叠抽屉笔的编码器中。它使它突然工作......但我没有看到两个代码之间没有区别......上帝知道我是如何得到这个工作的。

这是新的工作之一： http://codepen.io/Dingerzat/pen/MbwLBa

CSS

/* =Reset default browser CSS. Based on work by Eric Meyer: http://meyerweb.com/eric/tools/css/reset/index.html 
-------------------------------------------------------------- */ 
html, body, div, span, applet, object, iframe, 
h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
a, abbr, acronym, address, big, cite, code, 
del, dfn, em, font, img, ins, kbd, q, s, samp, 
small, strike, strong, sub, sup, tt, var, 
b, u, i, center, 
dl, dt, dd, ol, ul, li, 
fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td { 
    background: transparent; 
    border: 0; 
    margin: 0; 
    padding: 0; 
    vertical-align: baseline; } 

body { 
    line-height: 1; } 

h1, h2, h3, h4, h5, h6 { 
    clear: both; 
    font-weight: normal; } 

ol, ul { 
    list-style: none; } 

blockquote { 
    quotes: none; } 

blockquote:before, blockquote:after { 
    content: ''; 
    content: none; } 

del { 
    text-decoration: line-through; } 

/* tables still need 'cellspacing="0"' in the markup */ 
table { 
    border-collapse: collapse; 
    border-spacing: 0; } 

a img { 
    border: none; } 

/* =Scss Variables 
-------------------------------------------------------------- */ 
/* =Global 
-------------------------------------------------------------- */ 
*, 
*:before, 
*:after { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; } 

body { 
    background-color: #3cb5f9; 
    color: #505050; 
    font-family: "Ubuntu", sans-serif; 
    font-weight: 300; 
    font-size: 16px; 
    line-height: 1.8; } 

/* Headings */ 
h1, h2, h3, h4, h5, h6 { 
    line-height: 1; 
    font-weight: 300; } 

a { 
    text-decoration: none; 
    color: #3cb5f9; } 

a:hover { 
    color: #0793e2; } 

/* =Template 
-------------------------------------------------------------- */ 
#wrapper { 
    width: 100%; 
    margin: 0 auto; } 

#main { 
    background-color: #ffffff; 
    padding-top: 150px; } 

.container { 
    width: 80%; 
    margin: 0 auto; 
    padding: 0 30px; } 

.containertwo { 
    width: 86%; 
    margin: 0 auto; 
    padding: 0 30px; } 
.containertwo h3 { 
    font-size: 30px; 
    text-align: center; 
} 

section { 
    padding: 60px 0; } 
    section h1 { 
    font-weight: 700; 
    margin-bottom: 10px; } 
    section p { 
    margin-bottom: 30px; } 
    section p:last-child { 
     margin-bottom: 0; } 
    section.color { 
    background-color: #d51c84; 
    color: white; } 

/* =Info Bar 
-------------------------------------------------------------- */ 
#info-bar { 
    background-color: #000000; } 
    #info-bar a { 
    color: white; 
    font-size: 14px; 
    text-transform: uppercase; 
    display: inline-block; 
    margin: 0; 
    padding: 10px; } 
    #info-bar a:hover { 
     background-color: #0793e2; } 
    #info-bar span.all-tutorials, 
    #info-bar span.back-to-tutorial { 
    display: block; 
    width: 50%; } 
    #info-bar span.all-tutorials { 
    float: left; 
    text-align: left; } 
    #info-bar span.back-to-tutorial { 
    float: right; 
    text-align: right; } 

/* =Header 
-------------------------------------------------------------- */ 
#logo img {height: 40%;} 

header { 
    width: 100%; 
    height: 150px; 
    overflow: hidden; 
    position: fixed; 
    top: 0; 
    left: 0; 
    z-index: 999; 
    background-color: #000000; 
    -webkit-transition: height 0.3s; 
    -moz-transition: height 0.3s; 
    -ms-transition: height 0.3s; 
    -o-transition: height 0.3s; 
    transition: height 0.3s; } 
    header h1#logo { 
    display: inline-block; 
    height: 150px; 
    line-height: 150px; 
    float: left; 
    font-family: "Oswald", sans-serif; 
    font-size: 60px; 
    color: white; 
    font-weight: 400; 
    -webkit-transition: all 0.3s; 
    -moz-transition: all 0.3s; 
    -ms-transition: all 0.3s; 
    -o-transition: all 0.3s; 
    transition: all 0.3s; } 
    header nav { 
    display: inline-block; 
    float: right; } 
    header nav a { 
     line-height: 150px; 
     margin-left: 20px; 
     color: #ffffff; 
     font-weight: 700; 
     font-size: 18px; 
     -webkit-transition: all 0.3s; 
     -moz-transition: all 0.3s; 
     -ms-transition: all 0.3s; 
     -o-transition: all 0.3s; 
     transition: all 0.3s; } 
     header nav a:hover { 
     color: white; } 
    header.smaller { 
    height: 75px; } 
    header.smaller h1#logo { 
     width: 150px; 
     height: 75px; 
     line-height: 75px; 
     font-size: 30px; } 
    header.smaller nav a { 
     line-height: 75px; } 

/* =Footer 
-------------------------------------------------------------- */ 


*, *:before, *:after{ 
    box-sizing: border-box; 
    color: #242424; 
    padding: 20; margin: 30; 
} 

html, body{background: rgb(0, 0, 0);} 

.content{ 
    margin: auto; 
    margin-bottom: 350px; /* Same height as footer */ 
} 

.fixed_footer{ 
    width: 100%; 
    height: 350px; 
    background: #000000; 
    position: fixed; left: 0; bottom: 0; 
    z-index: -100; 
    padding:100px 5px; 
} 
    .fixed_footer p{ 
    color: #696969; 
    column-count: 2; 
    column-gap: 50px; 
    font-size: 1em; 
    font-weight: 300; 
} 
/* =Extras 
-------------------------------------------------------------- */ 
.clearfix:after { 
    visibility: hidden; 
    display: block; 
    content: ""; 
    clear: both; 
    height: 0; } 

/* =Media Queries 
-------------------------------------------------------------- */ 
@media all and (max-width: 660px) { 
    /* =Header 
    -------------------------------------------------------------- */ 
    header h1#logo { 
    display: block; 
    float: none; 
    margin: 0 auto; 
    height: 100px; 
    line-height: 100px; 
    text-align: center; } 
    header nav { 
    display: block; 
    float: none; 
    height: 50px; 
    text-align: center; 
    margin: 0 auto; } 
    header nav a { 
     line-height: 50px; 
     margin: 0 10px; } 
    header.smaller { 
    height: 75px; } 
    header.smaller h1#logo { 
     height: 40px; 
     line-height: 40px; 
     font-size: 30px; } 
    header.smaller nav { 
     height: 35px; } 
     header.smaller nav a { 
     line-height: 35px; } } 
@media all and (max-width: 600px) { 
    .container { 
    width: 100%; } 

    #info-bar a { 
    display: block; } 
    #info-bar span.all-tutorials, 
    #info-bar span.back-to-tutorial { 
    width: 100%; } 
    #info-bar span.all-tutorials, 
    #info-bar span.back-to-tutorial { 
    float: none; 
    text-align: center; } 
    #info-bar span.all-tutorials { 
    border-bottom: solid 1px #0793e2; } } 

html, 
body { 
    margin: 0; 
    height: 100%; 
} 

section { 
    position: relative; 
    height: 100%; 
    background-attachment: fixed; 
    background-size: cover !important; 
    background-position: center; 
    background-blend-mode: screen; 
    /* &:nth-of-type(1) */ 
} 
section h1 { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    font-size: 50px; 
    color: #fff; 
    width: 100%; 
    text-align: center; 
} 
section:nth-of-type(1) { 
    /* .paralax-1 */ 
} 
section:nth-of-type(1) .paralax-1 { 
    height: 100%; 
    width: 100%; 
    position: relative; 
    overflow: hidden; 
    /* .new-paralax */ 
} 
section:nth-of-type(1) .paralax-1 .new-paralax { 
    z-index: -100000; 
    transform: translateZ(-8000px) scale(0.4); 
    background-attachment: fixed; 
    background-size: cover !important; 
    background-position: center; 
    background-blend-mode: screen; 
    height: 100%; 
    width: 100%; 
    position: relative; 
    transform: scale(1.3); 
    background-color: #ffffff; 
    background-image: url("https://visualhunt.com/photos/xl/2/aerial-view-of-coffee-cup-on-wooden-table.jpg"); 
} 
section:nth-of-type(2) { 
    height: 20em; 
    background-image: url("http://www.maximiles.co.uk/images/dynamics/uk/email_images/ftpIMAGES2014/iStock_000068237701_Full-edited.jpg"); 
} 
section:nth-of-type(3) { 
    background-color: white; 
} 
section:nth-of-type(4) { 
    background-image: url("https://visualhunt.com/photos/xl/2/sport-gymnastics-frog-funny-fitness-fit-sporty-1.jpg"); 
} 
section:nth-of-type(5) { 
    background-color: white; 
} 
.collapse { 
    background-color: rgba(255,255,255,0); 
    border-bottom: 1px solid #eee; 
    cursor: pointer; 
    color: #fff; 
    padding: 10px; 
    margin:0px; 
    max-height:40px; 
    overflow:hidden; 
    transition: all 0.4s; 
} 
.collapse * { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 

} 
.collapse.active { 
    background-color: rgba(255,255,255,0.9); 
    box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2); 
    z-index: 200; 
    color:#444; 
    max-height:3000px; 
    padding:10px 20px; 
    margin: 10px -10px; 
    transition: all 0.2s,max-height 4.8s; 
} 
.collapse h2 { 
    font-size: 18px; 
    line-height: 20px; 
    position:relative 
} 
.transparent{ 
    background-color: rgba(255,255,255,0) !important; 
    color:#fff !important; 
    box-shadow:none !important; 
    margin:0px !important; 
    padding:10px !important 
} 
.collapse h2::after{ 
    content: "+"; 
    text-align:center; 
    position:absolute; 
    width:15px; 
    height:15px; 
    border:1px solid #ccc; 
    border-radius:50%; 
    font-size:12px; 
    line-height:15px; 
    opacity:0.5; 
    right:0; 
    top:0; 
} 
.collapse:hover h2::after{ 
    opacity:1 
} 

.collapse.active h2::after{ 
    content: "-"; 
} 

JS

/*! 
* classie v1.0.0 
* class helper functions 
* from bonzo https://github.com/ded/bonzo 
* MIT license 
* 
* classie.has(elem, 'my-class') -> true/false 
* classie.add(elem, 'my-new-class') 
* classie.remove(elem, 'my-unwanted-class') 
* classie.toggle(elem, 'my-class') 
*/ 

/*jshint browser: true, strict: true, undef: true, unused: true */ 
/*global define: false */ 

(function(window) { 

'use strict'; 

// class helper functions from bonzo https://github.com/ded/bonzo 

function classReg(className) { 
    return new RegExp("(^|\\s+)" + className + "(\\s+|$)"); 
} 

// classList support for class management 
// altho to be fair, the api sucks because it won't accept multiple classes at once 
var hasClass, addClass, removeClass; 

if ('classList' in document.documentElement) { 
    hasClass = function(elem, c) { 
    return elem.classList.contains(c); 
    }; 
    addClass = function(elem, c) { 
    elem.classList.add(c); 
    }; 
    removeClass = function(elem, c) { 
    elem.classList.remove(c); 
    }; 
} 
else { 
    hasClass = function(elem, c) { 
    return classReg(c).test(elem.className); 
    }; 
    addClass = function(elem, c) { 
    if (!hasClass(elem, c)) { 
     elem.className = elem.className + ' ' + c; 
    } 
    }; 
    removeClass = function(elem, c) { 
    elem.className = elem.className.replace(classReg(c), ' '); 
    }; 
} 

function toggleClass(elem, c) { 
    var fn = hasClass(elem, c) ? removeClass : addClass; 
    fn(elem, c); 
} 

var classie = { 
    // full names 
    hasClass: hasClass, 
    addClass: addClass, 
    removeClass: removeClass, 
    toggleClass: toggleClass, 
    // short names 
    has: hasClass, 
    add: addClass, 
    remove: removeClass, 
    toggle: toggleClass 
}; 

// transport 
if (typeof define === 'function' && define.amd) { 
    // AMD 
    define(classie); 
} else { 
    // browser global 
    window.classie = classie; 
} 

})(window); 

$('.collapse').on('click',function(e){ 
    e.preventDefault(); 
    $(this).toggleClass('active'); 
}); 

HTML

<!-- a merger of three different codepens by three different authors. 
http://codepen.io/madshaakansson/ 
http://codepen.io/Nickies/pen/ZYwJZM 
the third one I can't remember right now but will credit when I find it 
--> 

<!-- title and meta --> 
<meta charset="utf-8" /> 
<meta name="viewport" content="width=device-width,initial-scale=1.0" /> 
<meta name="description" content="" /> 
<title>Header Resize On Scroll with Animations</title> 

<!-- css --> 
<link href='http://fonts.googleapis.com/css?family=Ubuntu:300,400,700,400italic' rel='stylesheet' type='text/css'> 
<link href='http://fonts.googleapis.com/css?family=Oswald:400,300,700' rel='stylesheet' type='text/css'> 
<link rel="stylesheet" href="css/style.css" /> 

<!-- js --> 
<script src="js/classie.js"></script> 
<script> 
    function init() { 
     window.addEventListener('scroll', function(e){ 
      var distanceY = window.pageYOffset || document.documentElement.scrollTop, 
       shrinkOn = 300, 
       header = document.querySelector("header"); 
      if (distanceY > shrinkOn) { 
       classie.add(header,"smaller"); 
      } else { 
       if (classie.has(header,"smaller")) { 
        classie.remove(header,"smaller"); 
       } 
      } 
     }); 
    } 
    window.onload = init(); 
</script> 
</head> 



<body> 

<div id="wrapper"> 

<header> 
    <div class="container clearfix"> 
     <h1 id="logo"> 
      <img src="http://www.maximiles.co.uk/images/dynamics/uk/email_images/ftpIMAGES2014/bilendi-logo-trans.png"> 
     </h1> 
     <nav> 
      <a href="">Lorem</a> 
      <a href="">Ipsum</a> 
      <a href="">Dolor</a> 
     </nav> 
    </div> 
</header><!-- /header --> 
    <div id="main"> 
    <div id="content"> 
    <main class="content" role="main"> 

     <section> 
      <div class="container"> 
       <h2>Services for Market Research</h2><br> 
       <p>Cupcake ipsum dolor sit amet lollipop. Macaroon candy cotton candy bear claw macaroon carrot cake pastry icing dessert. Cupcake pastry tart sesame snaps lollipop donut pie. Cookie apple pie toffee lemon drops jelly beans cheesecake sweet roll. Jelly-o soufflé donut candy canes wafer dragée sweet cheesecake. Macaroon caramels pie cookie gummi bears. Ice cream jelly-o toffee cookie gingerbread cookie. Soufflé fruitcake jelly-o jelly chupa chups jelly beans. Dragée marzipan pastry macaroon oat cake muffin soufflé topping liquorice. Jelly-o chocolate cake lollipop.</p> 
       <p>Sugar plum muffin cookie pastry oat cake icing candy canes chocolate. Gummi bears chupa chups fruitcake dessert jelly. Muffin cookie ice cream soufflé pastry lollipop gingerbread sweet. Unerdwear.com bonbon candy marzipan bonbon gummies chocolate cake gummi bears powder. Unerdwear.com tart halvah chocolate cake dragée liquorice. Sugar plum chocolate bar pastry liquorice dragée jelly powder. Jelly tootsie roll applicake caramels. Marzipan candy tootsie roll donut. Gummies ice cream macaroon applicake.</p> 
       <div class="collapse transparent"> 
    <h2>I am transparent</h2> 
    The brain is like a muscle. When it is in use we feel very good. Understanding is joyous. 
    <b>Carl Sagan</b> 
    <p>This one keeps the transparency</p> 
       </div> 
       <p> 
        <a href="http://www.bilendi.co.uk">&laquo; Want to know more?</a><br> 
        <a href="http://www.bilendi.co.uk">&laquo; Become a citizen!</a> 
       </p> 
      </div> 
     </section> 
     <section class="color"> 
      <div class="container"> 
       <h1>Cupcakes for the people!</h1> 
      </div> 
     </section> 
     <section class="color"> 
      <div class="container"> 
       <p>Cupcake ipsum dolor sit amet lollipop. Macaroon candy cotton candy bear claw macaroon carrot cake pastry icing dessert. Cupcake pastry tart sesame snaps lollipop donut pie. Cookie apple pie toffee lemon drops jelly beans cheesecake sweet roll. Jelly-o soufflé donut candy canes wafer dragée sweet cheesecake. Macaroon caramels pie cookie gummi bears. Ice cream jelly-o toffee cookie gingerbread cookie. Soufflé fruitcake jelly-o jelly chupa chups jelly beans. Dragée marzipan pastry macaroon oat cake muffin soufflé topping liquorice. Jelly-o chocolate cake lollipop.</p> 
       <p>Sugar plum muffin cookie pastry oat cake icing candy canes chocolate. Gummi bears chupa chups fruitcake dessert jelly. Muffin cookie ice cream soufflé pastry lollipop gingerbread sweet. Unerdwear.com bonbon candy marzipan bonbon gummies chocolate cake gummi bears powder. Unerdwear.com tart halvah chocolate cake dragée liquorice. Sugar plum chocolate bar pastry liquorice dragée jelly powder. Jelly tootsie roll applicake caramels. Marzipan candy tootsie roll donut. Gummies ice cream macaroon applicake.</p> 
      </div> 
     </section> 
     <section> 
      <div class="container"> 
       <h1>Sugar rush, oh my...</h1> 
       <p>Cupcake ipsum dolor sit amet lollipop. Macaroon candy cotton candy bear claw macaroon carrot cake pastry icing dessert. Cupcake pastry tart sesame snaps lollipop donut pie. Cookie apple pie toffee lemon drops jelly beans cheesecake sweet roll. Jelly-o soufflé donut candy canes wafer dragée sweet cheesecake. Macaroon caramels pie cookie gummi bears. Ice cream jelly-o toffee cookie gingerbread cookie. Soufflé fruitcake jelly-o jelly chupa chups jelly beans. Dragée marzipan pastry macaroon oat cake muffin soufflé topping liquorice. Jelly-o chocolate cake lollipop.</p> 
       <p>Sugar plum muffin cookie pastry oat cake icing candy canes chocolate. Gummi bears chupa chups fruitcake dessert jelly. Muffin cookie ice cream soufflé pastry lollipop gingerbread sweet. Unerdwear.com bonbon candy marzipan bonbon gummies chocolate cake gummi bears powder. Unerdwear.com tart halvah chocolate cake dragée liquorice. Sugar plum chocolate bar pastry liquorice dragée jelly powder. Jelly tootsie roll applicake caramels. Marzipan candy tootsie roll donut. Gummies ice cream macaroon applicake.</p> 
      </div> 
     </section> 
     <section> 
      <div class="containertwo"> 
       <h3>Enquire</h2> 
       <script type="text/javascript" src="https://bilendi.formstack.com/forms/js.php/bilendi_test_2"></script><noscript><a href="https://bilendi.formstack.com/forms/bilendi_test_2" title="Online Form">Online Form - BILENDI TEST 2</a></noscript><div style="text-align:right; font-size:x-small;"><a href="http://www.formstack.com?utm_source=jsembed&utm_medium=product&utm_campaign=product+branding&fa=h,2521222" title="HTML Form Builder">HTML Form Builder</a></div> 
     </div> 
       </section> 
    </main></div> 
</div><!-- #main --> 


<footer class="fixed_footer"> 
    <div class=" container content"> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis ducimus nemo quo totam neque quis soluta nisi obcaecati aliquam saepe dicta adipisci blanditiis quaerat earum laboriosam accusamus nesciunt! Saepe ex maxime enim asperiores nisi. Obcaecati nostrum nobis laudantium aliquam commodi veniam magni similique ullam quis pariatur voluptatem harum id error.</p> 
    </div> 
</footer> 



</div><!-- /#wrapper --> 

</body> 
</html> 

Answer 2

瓦你是否在拉动jQuery？在你链接的例子中的处理程序需要使用jQuery。

该位：

$('.collapse').on('click',function(e){ 
    e.preventDefault(); 
    $(this).toggleClass('active'); 
}); 

因此，请确保您在拉它，如果你想用那支笔。