HTML、CSS、JavaScript 实现下拉菜单效果

JS

@font-face {
          font-family: 'Merriweather Sans';
          font-style: italic;
          font-weight: 800;
          src: local('Merriweather Sans ExtraBold Italic'), local('MerriweatherSans-ExtraBldItalic'), url(http://fonts.gstatic.com/s/merriweathersans/v5/nAqt4hiqwq3tzCecpgPmVfrUSW10CwTuVx9PepRx9ls.woff2) format('woff2'), url(http://fonts.gstatic.com/s/merriweathersans/v5/nAqt4hiqwq3tzCecpgPmVW2xy75WLVt7UI7Cycabsy8.woff) format('woff');
        }
        @font-face {
            font-family: "open";
            font-style: normal;
            font-weight: 300;
            src: local( "Open Sans Light" ), local( "OpenSans-Light" ), 
                url( https://themes.googleusercontent.com/static/fonts/opensans/v6/DXI1ORHCpsQm3Vp6mXoaTZ1r3JsPcQLi8jytr04NNhU.woff ) format( 'woff' );
        }
        
        *, *:before, *:after {
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
        }
        
        a {
            color: inherit;
            text-decoration: none;
        }
        
        h1, h2, h3 {
            margin: 0;
            font-weight: normal;
        }
        
        html, body {
            padding: 0;
            margin: 0;
            background: #eee;
        }
        
        body {
            padding-top: 80px;
        }
        
        .section {
            width: 400px;
            margin: 7px auto;
            height: 69px;
            box-shadow: 0 1px 2px rgba( 0, 0, 0, .2 );
            overflow: hidden;
            -webkit-transition: .35s;
            transition: .35s;
        }
        
        .title {
            padding: 20px;
            padding-top: 24px;
            background: #00C37E;
            color: #fff;
            cursor: pointer;
            text-shadow: 0 1px 0 #666;
            width: 100%;
            text-transform: capitalize;
            font-family: 'Merriweather Sans', sans-serif;
          font-style: italic;
            position: relative;
            -moz-user-select: none;
            -ms-user-select: none;
            -webkit-user-select: none;
            user-select: none;
            z-index: 10;
        }
        
        .title:before, .title:after {
            content: "";
            display: block;
            position: absolute;
            right: 20px;
            top: 21px;
          font-style: normal;
            height: 21px;
          line-height: 1;
            overflow: hidden;
            font-family: FontAwesome;
            font-size: 20px;
            background: #00C37E;
            -webkit-transition: .35s;
            transition: .35s;
        }
        
        .title:before {
            z-index: 2;
        }
        .title:after {
            top: 25px;
            -webkit-transform: rotate( 180deg );
            -ms-transform: rotate( 180deg );
            -moz-transform: rotate( 180deg );
            transform: rotate( 180deg );
        }
        
        .open .title:before {
            height: 0;
        }
        
        .body {
            font: 16px open, sans-serif;
            background: #fff;
            padding: 20px 20px 40px;
            color: #777;
            -moz-transform: translateY( -100% );
            -ms-transform: translateY( -100% );
            -webkit-transform: translateY( -100% );
            transform: translateY( -100% );
            overflow: hidden;
            -webkit-transition: .35s;
            transition: .35s;
        }
            .body h2 {
                color: #333;
                font-size: 22px;
                margin-bottom: 10px;
            }
            .body h2:before {
                content: '▪';
                padding-right: 7px;
                color: #00C37E;
            }
            .body a {
                color: #00C37E;
            }
            .body span {
                font-size: 12px;
            }
            
        .section.open {
            height: 288px;
        }
        .open .body {
            -webkit-transform: none;
            -ms-transform: none;
            -moz-transform: none;
            transform: none;
        }

JS部分

;!( function( w, d ) {
    
      'use strict';
      
        var titles = d.querySelectorAll( '.title' ),
            
            i = 0,
            len = titles.length;
            
        for ( ; i < len; i++ )
            titles[ i ].onclick = function( e ) {
            
                for ( var j = 0; j < len; j++ )
                    if ( this != titles[ j ] )
                        titles[ j ].parentNode.className = titles[ j ].parentNode.className.replace( / open/i, '' );
            
                var cn = this.parentNode.className;
            
                this.parentNode.className = ~cn.search( /open/i ) ? cn.replace( / open/i, '' ) : cn + ' open';
            
            };
    
    })( this, document );

HTML部分

<body>
        <div class="section">
            <div class="title">
                click here
            </div>
            <div class="body">
                <h2>你好</h2>
                <br />
                <br />
                <span>Crafted by: <a href="http://linkedin.com/in/mrReiha">Reiha Hosseini</a></span>
            </div>
        </div>
        <div class="section">
            <div class="title">
                click here
            </div>
            <div class="body">
                <h2>我不好</h2>
                <br />
                <br />
                <span>Crafted by: <a href="http://linkedin.com/in/mrReiha">Reiha Hosseini</a></span>
            </div>
        </div>
        <div class="section">
            <div class="title">
                click here
            </div>
            <div class="body">
                <h2>我很好</h2>
                <br />
                <br />
                <span>Crafted by: <a href="http://linkedin.com/in/mrReiha">Reiha Hosseini</a></span>
            </div>
        </div>
    </body>

效果图