Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/431.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript .addEventListener不是函数吗?_Javascript_Jquery_Html_Wordpress - Fatal编程技术网

Javascript .addEventListener不是函数吗?

Javascript .addEventListener不是函数吗?,javascript,jquery,html,wordpress,Javascript,Jquery,Html,Wordpress,在我尝试将它实现到我的Wordpress网站之前,有人曾在这个脚本工作良好的地方帮助过我 这两组灰点是按钮。每个按钮都将打开自己的幻灯片菜单 在控制台上,我收到了这个特定的错误。“openbtn.addEventListener不是函数” 与本规范相关的: 在codepen中,错误位于第104行 /*! *classie类辅助函数 *classie.has(elem,'我的类')->真/假 *添加(元素“我的新类”) *类移除(元素“我不想要的类”) *classie.toggle(元素“我

在我尝试将它实现到我的Wordpress网站之前,有人曾在这个脚本工作良好的地方帮助过我

这两组灰点是按钮。每个按钮都将打开自己的幻灯片菜单


在控制台上,我收到了这个特定的错误。“openbtn.addEventListener不是函数”

与本规范相关的:

在codepen中,错误位于第104行


/*!
*classie类辅助函数
*classie.has(elem,'我的类')->真/假
*添加(元素“我的新类”)
*类移除(元素“我不想要的类”)
*classie.toggle(元素“我的类”)
*/
/*jshint浏览器:true,strict:true,undef:true*/
/*全局定义:false*/
(功能(窗口){
"严格使用",;
//来自bonzo的类帮助器函数https://github.com/ded/bonzo
函数classReg(className){
返回新的RegExp(“(^ | s+”+className+”(s+|$)”);
}
//类列表对类管理的支持
//虽然公平地说,api很糟糕,因为它不会同时接受多个类
变量hasClass、addClass、removeClass;
if(document.documentElement中的“类列表”){
hasClass=函数(元素,c){
返回元素classList.contains(c);
};
addClass=函数(元素,c){
元素类列表添加(c);
};
removeClass=函数(elem,c){
元素类列表。删除(c);
};
}否则{
hasClass=函数(元素,c){
返回classReg(c).test(elem.className);
};
addClass=函数(元素,c){
如果(!hasClass(elem,c)){
elem.className=elem.className+''+c;
}
};
removeClass=函数(elem,c){
elem.className=elem.className.replace(classReg(c),“”);
};
}
函数切换类(elem,c){
var fn=hasClass(elem,c)?removeClass:addClass;
fn(elem,c);
}
风险等级={
//全名
hasClass:hasClass,
addClass:addClass,
removeClass:removeClass,
toggleClass:toggleClass,
//简称
has:hasClass,
add:addClass,
remove:removeClass,
切换:切换类
};
//运输
if(typeof define=='function'&&define.amd){
//AMD
定义(分类);
}否则{
//浏览器全局
window.classie=classie;
}
})(窗口);
/**
*main.js
* http://www.codrops.com
*
*根据麻省理工学院许可证授权。
* http://www.opensource.org/licenses/mit-license.php
* 
*版权所有2014,Codrops
* http://www.codrops.com
*/(功能(){
var bodyEl=document.body,
content=document.querySelector('.content wrap'),
openbtn=$(“.menu按钮”)。单击(函数(){
$(this).next(“.menu wrap”).toggleClass(“show menu”);
}),
closebtn=document.getElementById('close-button'),
isOpen=假;
函数init(){
initEvents();
}
函数initEvents(){
openbtn.addEventListener('单击',切换菜单);
如果(关闭BTN){
closebtn.addEventListener(“单击”,切换菜单);
}
//如果目标元素不是菜单元素或其子元素之一,请关闭菜单元素。。
content.addEventListener('click',函数(ev){
var目标=ev目标;
if(isOpen&&target!==openbtn){
切换菜单();
}
});
}
函数切换菜单(){
if(等参线){
类别移除(bodyEl,“显示菜单”);
}否则{
添加(bodyEl,“显示菜单”);
}
等参=!等参;
}
init();
})();
我曾研究过人们在.addeventlistener中遇到类似问题的地方,但实际上,他们所有的解决方案都是针对他们的代码执行的。如何在保留代码目的的同时解决此问题

网站的HTML

<html lang="en-US" class="js"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <link rel="profile" href="http://gmpg.org/xfn/11">
    <link rel="pingback" href="http://generation-co.co/xmlrpc.php">
    <!--[if lt IE 9]>
    <script src="http://generation-co.co/wp-content/themes/twentyfifteen/js/html5.js"></script>
    <![endif]-->
    <script>(function(html){html.className = html.className.replace(/\bno-js\b/,'js')})(document.documentElement);</script>
<title>Generation | Beta</title>
<link rel="alternate" type="application/rss+xml" title="Generation » Feed" href="https://generation-co.co/index.php/feed/">
<link rel="alternate" type="application/rss+xml" title="Generation » Comments Feed" href="https://generation-co.co/index.php/comments/feed/">
        <script type="text/javascript">
            window._wpemojiSettings = {"baseUrl":"http:\/\/s.w.org\/images\/core\/emoji\/72x72\/","ext":".png","source":{"concatemoji":"http:\/\/generation-co.co\/wp-includes\/js\/wp-emoji-release.min.js?ver=4.2.4"}};
            !function(a,b,c){function d(a){var c=b.createElement("canvas"),d=c.getContext&&c.getContext("2d");return d&&d.fillText?(d.textBaseline="top",d.font="600 32px Arial","flag"===a?(d.fillText(String.fromCharCode(55356,56812,55356,56807),0,0),c.toDataURL().length>3e3):(d.fillText(String.fromCharCode(55357,56835),0,0),0!==d.getImageData(16,16,1,1).data[0])):!1}function e(a){var c=b.createElement("script");c.src=a,c.type="text/javascript",b.getElementsByTagName("head")[0].appendChild(c)}var f,g;c.supports={simple:d("simple"),flag:d("flag")},c.DOMReady=!1,c.readyCallback=function(){c.DOMReady=!0},c.supports.simple&&c.supports.flag||(g=function(){c.readyCallback()},b.addEventListener?(b.addEventListener("DOMContentLoaded",g,!1),a.addEventListener("load",g,!1)):(a.attachEvent("onload",g),b.attachEvent("onreadystatechange",function(){"complete"===b.readyState&&c.readyCallback()})),f=c.source||{},f.concatemoji?e(f.concatemoji):f.wpemoji&&f.twemoji&&(e(f.twemoji),e(f.wpemoji)))}(window,document,window._wpemojiSettings);
        </script><script src="http://generation-co.co/wp-includes/js/wp-emoji-release.min.js?ver=4.2.4" type="text/javascript"></script>
        <style type="text/css">
img.wp-smiley,
img.emoji {
    display: inline !important;
    border: none !important;
    box-shadow: none !important;
    height: 1em !important;
    width: 1em !important;
    margin: 0 .07em !important;
    vertical-align: -0.1em !important;
    background: none !important;
    padding: 0 !important;
}
</style>
<link rel="stylesheet" id="parent-style-css" href="http://generation-co.co/wp-content/themes/twentyfifteen/style.css?ver=4.2.4" type="text/css" media="all">
<link rel="stylesheet" id="child-style-css" href="http://generation-co.co/wp-content/themes/generation-1-1/style.css?ver=4.2.4" type="text/css" media="all">
<link rel="stylesheet" id="twentyfifteen-fonts-css" href="//fonts.googleapis.com/css?family=Noto+Sans%3A400italic%2C700italic%2C400%2C700%7CNoto+Serif%3A400italic%2C700italic%2C400%2C700%7CInconsolata%3A400%2C700&amp;subset=latin%2Clatin-ext" type="text/css" media="all">
<link rel="stylesheet" id="genericons-css" href="http://generation-co.co/wp-content/plugins/jetpack/_inc/genericons/genericons/genericons.css?ver=3.1" type="text/css" media="all">
<link rel="stylesheet" id="twentyfifteen-style-css" href="http://generation-co.co/wp-content/themes/generation-1-1/style.css?ver=4.2.4" type="text/css" media="all">
<style id="twentyfifteen-style-inline-css" type="text/css">

        /* Custom Sidebar Text Color */
        .site-title a,
        .site-description,
        .secondary-toggle:before {
            color: #ffffff;
        }

        .site-title a:hover,
        .site-title a:focus {
            color: #ffffff; /* Fallback for IE7 and IE8 */
            color: rgba( 255, 255, 255, 0.7);
        }

        .secondary-toggle {
            border-color: #ffffff; /* Fallback for IE7 and IE8 */
            border-color: rgba( 255, 255, 255, 0.1);
        }

        .secondary-toggle:hover,
        .secondary-toggle:focus {
            border-color: #ffffff; /* Fallback for IE7 and IE8 */
            border-color: rgba( 255, 255, 255, 0.3);
        }

        .site-title a {
            outline-color: #ffffff; /* Fallback for IE7 and IE8 */
            outline-color: rgba( 255, 255, 255, 0.3);
        }

        @media screen and (min-width: 59.6875em) {
            .secondary a,
            .dropdown-toggle:after,
            .widget-title,
            .widget blockquote cite,
            .widget blockquote small {
                color: #ffffff;
            }

            .widget button,
            .widget input[type="button"],
            .widget input[type="reset"],
            .widget input[type="submit"],
            .widget_calendar tbody a {
                background-color: #ffffff;
            }

            .textwidget a {
                border-color: #ffffff;
            }

            .secondary a:hover,
            .secondary a:focus,
            .main-navigation .menu-item-description,
            .widget,
            .widget blockquote,
            .widget .wp-caption-text,
            .widget .gallery-caption {
                color: rgba( 255, 255, 255, 0.7);
            }

            .widget button:hover,
            .widget button:focus,
            .widget input[type="button"]:hover,
            .widget input[type="button"]:focus,
            .widget input[type="reset"]:hover,
            .widget input[type="reset"]:focus,
            .widget input[type="submit"]:hover,
            .widget input[type="submit"]:focus,
            .widget_calendar tbody a:hover,
            .widget_calendar tbody a:focus {
                background-color: rgba( 255, 255, 255, 0.7);
            }

            .widget blockquote {
                border-color: rgba( 255, 255, 255, 0.7);
            }

            .main-navigation ul,
            .main-navigation li,
            .secondary-toggle,
            .widget input,
            .widget textarea,
            .widget table,
            .widget th,
            .widget td,
            .widget pre,
            .widget li,
            .widget_categories .children,
            .widget_nav_menu .sub-menu,
            .widget_pages .children,
            .widget abbr[title] {
                border-color: rgba( 255, 255, 255, 0.1);
            }

            .dropdown-toggle:hover,
            .dropdown-toggle:focus,
            .widget hr {
                background-color: rgba( 255, 255, 255, 0.1);
            }

            .widget input:focus,
            .widget textarea:focus {
                border-color: rgba( 255, 255, 255, 0.3);
            }

            .sidebar a:focus,
            .dropdown-toggle:focus {
                outline-color: rgba( 255, 255, 255, 0.3);
            }
        }

</style>
<!--[if lt IE 9]>
<link rel='stylesheet' id='twentyfifteen-ie-css'  href='http://generation-co.co/wp-content/themes/twentyfifteen/css/ie.css?ver=20141010' type='text/css' media='all' />
<![endif]-->
<!--[if lt IE 8]>
<link rel='stylesheet' id='twentyfifteen-ie7-css'  href='http://generation-co.co/wp-content/themes/twentyfifteen/css/ie7.css?ver=20141010' type='text/css' media='all' />
<![endif]-->
<script type="text/javascript" src="http://generation-co.co/wp-includes/js/jquery/jquery.js?ver=1.11.2"></script><style type="text/css"></style>
<script type="text/javascript" src="http://generation-co.co/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1"></script>
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://generation-co.co/xmlrpc.php?rsd">
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://generation-co.co/wp-includes/wlwmanifest.xml"> 
<meta name="generator" content="WordPress 4.2.4">
    <style type="text/css">.recentcomments a{display:inline !important;padding:0 !important;margin:0 !important;}</style>
    <style type="text/css" id="twentyfifteen-header-css">
            .site-header {
            padding-top: 14px;
            padding-bottom: 14px;
        }

        .site-branding {
            min-height: 42px;
        }

        @media screen and (min-width: 46.25em) {
            .site-header {
                padding-top: 21px;
                padding-bottom: 21px;
            }
            .site-branding {
                min-height: 56px;
            }
        }
        @media screen and (min-width: 55em) {
            .site-header {
                padding-top: 25px;
                padding-bottom: 25px;
            }
            .site-branding {
                min-height: 62px;
            }
        }
        @media screen and (min-width: 59.6875em) {
            .site-header {
                padding-top: 0;
                padding-bottom: 0;
            }
            .site-branding {
                min-height: 0;
            }
        }
            .site-title,
        .site-description {
            clip: rect(1px, 1px, 1px, 1px);
            position: absolute;
        }
        </style>
    <style type="text/css" id="custom-background-css">
body.custom-background { background-color: #ffffff; }
</style>
</head>

<body class="home blog custom-background">
<div id="page" class="hfeed site">
    <a class="skip-link screen-reader-text" href="#content">Skip to content</a>

    <div id="sidebar" class="sidebar" style="position: fixed;">
        <header id="masthead" class="site-header" role="banner">
            <div class="site-branding">
                                        <h1 class="site-title"><a href="https://generation-co.co/" rel="home">Generation</a></h1>
                                            <p class="site-description">Beta</p>
                                    <button class="secondary-toggle">Menu and widgets</button>
            </div><!-- .site-branding -->
        </header><!-- .site-header -->

            <div id="secondary" class="secondary">



                    <div id="widget-area" class="widget-area" role="complementary">
                <aside id="search-2" class="widget widget_search"><form role="search" method="get" class="search-form" action="https://generation-co.co/">
                <label>
                    <span class="screen-reader-text">Search for:</span>
                    <input type="search" class="search-field" placeholder="Search …" value="" name="s" title="Search for:">
                </label>
                <input type="submit" class="search-submit screen-reader-text" value="Search">
            </form></aside>     <aside id="recent-posts-2" class="widget widget_recent_entries">        <h2 class="widget-title">Recent Posts</h2>      <ul>
                    <li>
                <a href="https://generation-co.co/index.php/2015/08/17/test-2/">Test 2</a>
                        </li>
                    <li>
                <a href="https://generation-co.co/index.php/2015/08/15/wordpress-resources-at-siteground/">WordPress Resources at SiteGround</a>
                        </li>
                </ul>
        </aside><aside id="recent-comments-2" class="widget widget_recent_comments"><h2 class="widget-title">Recent Comments</h2><ul id="recentcomments"><li class="recentcomments"><span class="comment-author-link"><a href="https://wordpress.org/" rel="external nofollow" class="url">Mr WordPress</a></span> on <a href="https://generation-co.co/index.php/2015/08/15/wordpress-resources-at-siteground/#comment-1">WordPress Resources at SiteGround</a></li></ul></aside><aside id="archives-2" class="widget widget_archive"><h2 class="widget-title">Archives</h2>       <ul>
    <li><a href="https://generation-co.co/index.php/2015/08/">August 2015</a></li>
        </ul>
</aside><aside id="categories-2" class="widget widget_categories"><h2 class="widget-title">Categories</h2>      <ul>
    <li class="cat-item cat-item-1"><a href="https://generation-co.co/index.php/category/uncategorized/">Uncategorized</a>
</li>
        </ul>
</aside>
<!-- Start - HTML Javascript Adder plugin v3.9 -->
<aside id="html_javascript_adder-3" class="widget widget_html_javascript_adder">
<div class="hjawidget textwidget">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
 /*!
  * classie - class helper functions
  * 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 */
 /*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);


 /**
  * main.js
  * http://www.codrops.com
  *
  * Licensed under the MIT license.
  * http://www.opensource.org/licenses/mit-license.php
  * 
  * Copyright 2014, Codrops
  * http://www.codrops.com
  */ (function () {

     var bodyEl = document.body,
         content = document.querySelector('.content-wrap'),
         openbtn = $(".menu-button").click(function () {
    $(this).next(".menu-wrap").toggleClass("show-menu");
}),
         closebtn = document.getElementById('close-button'),
         isOpen = false;

     function init() {
         initEvents();
     }

     function initEvents() {
         openbtn = $(".menu-button");
openbtn.click(function () {
       $(this).next(".menu-wrap").toggleClass("show-menu");
});
         if (closebtn) {
             closebtn.addEventListener('click', toggleMenu);
         }

         // close the menu element if the target it´s not the menu element or one of its descendants..
         content.addEventListener('click', function (ev) {
             var target = ev.target;
             if (isOpen && target !== openbtn) {
                 toggleMenu();
             }
         });
     }

     function toggleMenu() {
         if (isOpen) {
             classie.remove(bodyEl, 'show-menu');
         } else {
             classie.add(bodyEl, 'show-menu');
         }
         isOpen = !isOpen;
     }

     init();

 })();</script>
</div>
</aside><!-- End - HTML Javascript Adder plugin v3.9 -->
<aside id="meta-2" class="widget widget_meta"><h2 class="widget-title">Meta</h2>            <ul>
                        <li><a href="https://generation-co.co/wp-login.php">Log in</a></li>
            <li><a href="https://generation-co.co/index.php/feed/">Entries <abbr title="Really Simple Syndication">RSS</abbr></a></li>
            <li><a href="https://generation-co.co/index.php/comments/feed/">Comments <abbr title="Really Simple Syndication">RSS</abbr></a></li>
<li><a href="https://wordpress.org/" title="Powered by WordPress, state-of-the-art semantic personal publishing platform.">WordPress.org</a></li>           </ul>
</aside>            </div><!-- .widget-area -->

    </div><!-- .secondary -->

    </div><!-- .sidebar -->

    <div id="content" class="site-content">

    <div id="primary" class="content-area">
        <main id="main" class="site-main" role="main">




<article id="post-3" class="post-3 post type-post status-publish format-standard hentry category-uncategorized">

    <header class="entry-header">
        <h2 class="entry-title"><a href="https://generation-co.co/index.php/2015/08/17/test-2/" rel="bookmark">Test 2</a></h2>  </header><!-- .entry-header -->

    <div class="entry-content">
        <p><img src="https://igcdn-photos-h-a.akamaihd.net/hphotos-ak-xaf1/t51.2885-15/11809878_119652368381343_624710955_n.jpg" width="1080" height="1080" class="aligncenter"></p>
<p><br>
<button class="menu-button">Open Menu</button></p>
<div class="menu-wrap"></div>
<p><button class="menu-button" style="top: 560px;">Open Menu</button></p>
<div class="menu-wrap" style="top: 700px;">
</div>
<p></p>
    </div><!-- .entry-content -->


    <footer class="entry-footer">
        <span class="posted-on"><span class="screen-reader-text">Posted on </span><a href="https://generation-co.co/index.php/2015/08/17/test-2/" rel="bookmark"><time class="entry-date published" datetime="2015-08-17T22:02:36+00:00">August 17, 2015</time><time class="updated" datetime="2015-08-17T23:10:27+00:00">August 17, 2015</time></a></span><span class="comments-link"><a href="https://generation-co.co/index.php/2015/08/17/test-2/#respond">Leave a comment</a></span>           </footer><!-- .entry-footer -->

</article><!-- #post-## -->

<article id="post-1" class="post-1 post type-post status-publish format-standard hentry category-uncategorized">

    <header class="entry-header">
        <h2 class="entry-title"><a href="https://generation-co.co/index.php/2015/08/15/wordpress-resources-at-siteground/" rel="bookmark">WordPress Resources at SiteGround</a></h2>    </header><!-- .entry-header -->

    <div class="entry-content">
        <p>WordPress is an award-winning web software, used by millions of webmasters worldwide for building their website or blog. SiteGround is proud to host this particular WordPress installation and provide users with multiple resources to facilitate the management of their WP websites:</p>
<h3>Expert <a href="http://www.siteground.com/wordpress-hosting.htm">WordPress Hosting</a></h3>
<p>SiteGround provides superior WordPress hosting focused on speed, security and customer service. We take care of WordPress sites security with unique server-level customizations, WP auto-updates, and daily backups. We make them faster by regularly upgrading our hardware, offering free CDN with Railgun and developing our SuperCacher that speeds sites up to 100 times! And last but not least, we provide real WordPress help 24/7! Learn more about SiteGround WordPress hosting</p>
<h3>WordPress tutorial and knowledgebase articles</h3>
<p>WordPress is considered an easy to work with software. Yet, if you are a beginner you might need some help, or you might be looking for tweaks that do not come naturally even to more advanced users. SiteGround <a href="http://www.siteground.com/tutorials/wordpress/">WordPress tutorial</a> includes installation and theme change instructions, management of WordPress plugins, manual upgrade and backup creation, and more. If you are looking for a more rare setup or modification, you may visit <a href="http://kb.siteground.com">SiteGround Knowledgebase</a>.</p>
<h3><a href="http://www.siteground.com/wordpress-hosting/wordpress-themes.htm">Free WordPress themes</a></h3>
<p>SiteGround experts not only develop various solutions for WordPress sites, but also create unique designs that you could download for free. SiteGround WordPress themes are easy to customize for the particular use of the webmaster.</p>
    </div><!-- .entry-content -->


    <footer class="entry-footer">
        <span class="posted-on"><span class="screen-reader-text">Posted on </span><a href="https://generation-co.co/index.php/2015/08/15/wordpress-resources-at-siteground/" rel="bookmark"><time class="entry-date published updated" datetime="2015-08-15T00:43:01+00:00">August 15, 2015</time></a></span><span class="comments-link"><a href="https://generation-co.co/index.php/2015/08/15/wordpress-resources-at-siteground/#comments">1 Comment</a></span>           </footer><!-- .entry-footer -->

</article><!-- #post-## -->

        </main><!-- .site-main -->
    </div><!-- .content-area -->


    </div><!-- .site-content -->

    <footer id="colophon" class="site-footer" role="contentinfo">
        <div class="site-info">
                        <a href="https://wordpress.org/">Proudly powered by WordPress</a>
        </div><!-- .site-info -->
    </footer><!-- .site-footer -->

</div><!-- .site -->

<script type="text/javascript" src="http://generation-co.co/wp-content/themes/twentyfifteen/js/skip-link-focus-fix.js?ver=20141010"></script>
<script type="text/javascript">
/* <![CDATA[ */
var screenReaderText = {"expand":"<span class=\"screen-reader-text\">expand child menu<\/span>","collapse":"<span class=\"screen-reader-text\">collapse child menu<\/span>"};
/* ]]> */
</script>
<script type="text/javascript" src="http://generation-co.co/wp-content/themes/twentyfifteen/js/functions.js?ver=20150330"></script>



</body></html>

(函数(html){html.className=html.className.replace(/\bno js\b/,'js')})(document.documentElement);
第二代|β
window.\u wpemojiSettings={“baseUrl”:“http:\/\/s.w.org\/images\/core\/emoji\/72x72\/”,“ext:.png”,“source:{“concatemoji”:“http:\/\/generation-co.co\/wp includes\/js\/wp emoji release.min.js?ver=4.2.4”};
!函数(a,b,c){function d(a){var c=b.createElement(“canvas”),d=c.getContext&&c.getContext(“2d”);返回d&&d.fillText?(d.textbeline=“top”,d.font=“600 32px Arial”,“flag”==a?(d.fillText(String.fromCharCode(553565681255356807),0,0),c.toDataURL()。长度>3e3):(d.fillText(String.fromCharCode(5535756835),0,0),0!=d.getImageData(16),数据[1,0])):!1}函数e(a){var c=b.createElement(“脚本”);c.src=a,c.type=“text/javascript”,b.getElementsByTagName(“head”)[0].appendChild(c)}var f,g;c.supports={simple:d(“simple”),flag:d(“flag”)},c.domReadyCallback=!函数(){c.domReadyCallback=!0},c.supports.simple&&c.supports.flag |(g=function(){c.readyCallback readyCallback(),Adderb}?(b.addEventListener(“DOMContentLoaded”,g,!1),a.addEventListener(“load,g,!1”):(a.attachEvent(“onload”,g),b.attachEvent(“onreadystatechange”,function(){“complete”==b.readyState&&c.readyCallback()),f=c.source |{},f.concatemoji?e(f.concatemoji):f.wpemoji&&f.twemoji&&e(f.twemoji),e(f.wpemoji)),e)(f.wpemoji)),e)(f.wpemoji)窗口、文档、窗口);
img.wp-smiley,
表情符号{
显示:内联!重要;
边界:没有!重要;
盒影:无!重要;
高度:1米!重要;
宽度:1米!重要;
保证金:0.07em!重要;
垂直对齐:-0.1米!重要;
背景:无!重要;
填充:0!重要;
}
/*自定义边栏文本颜色*/
.地盘名称a,
.site des
<html lang="en-US" class="js"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <link rel="profile" href="http://gmpg.org/xfn/11">
    <link rel="pingback" href="http://generation-co.co/xmlrpc.php">
    <!--[if lt IE 9]>
    <script src="http://generation-co.co/wp-content/themes/twentyfifteen/js/html5.js"></script>
    <![endif]-->
    <script>(function(html){html.className = html.className.replace(/\bno-js\b/,'js')})(document.documentElement);</script>
<title>Generation | Beta</title>
<link rel="alternate" type="application/rss+xml" title="Generation » Feed" href="https://generation-co.co/index.php/feed/">
<link rel="alternate" type="application/rss+xml" title="Generation » Comments Feed" href="https://generation-co.co/index.php/comments/feed/">
        <script type="text/javascript">
            window._wpemojiSettings = {"baseUrl":"http:\/\/s.w.org\/images\/core\/emoji\/72x72\/","ext":".png","source":{"concatemoji":"http:\/\/generation-co.co\/wp-includes\/js\/wp-emoji-release.min.js?ver=4.2.4"}};
            !function(a,b,c){function d(a){var c=b.createElement("canvas"),d=c.getContext&&c.getContext("2d");return d&&d.fillText?(d.textBaseline="top",d.font="600 32px Arial","flag"===a?(d.fillText(String.fromCharCode(55356,56812,55356,56807),0,0),c.toDataURL().length>3e3):(d.fillText(String.fromCharCode(55357,56835),0,0),0!==d.getImageData(16,16,1,1).data[0])):!1}function e(a){var c=b.createElement("script");c.src=a,c.type="text/javascript",b.getElementsByTagName("head")[0].appendChild(c)}var f,g;c.supports={simple:d("simple"),flag:d("flag")},c.DOMReady=!1,c.readyCallback=function(){c.DOMReady=!0},c.supports.simple&&c.supports.flag||(g=function(){c.readyCallback()},b.addEventListener?(b.addEventListener("DOMContentLoaded",g,!1),a.addEventListener("load",g,!1)):(a.attachEvent("onload",g),b.attachEvent("onreadystatechange",function(){"complete"===b.readyState&&c.readyCallback()})),f=c.source||{},f.concatemoji?e(f.concatemoji):f.wpemoji&&f.twemoji&&(e(f.twemoji),e(f.wpemoji)))}(window,document,window._wpemojiSettings);
        </script><script src="http://generation-co.co/wp-includes/js/wp-emoji-release.min.js?ver=4.2.4" type="text/javascript"></script>
        <style type="text/css">
img.wp-smiley,
img.emoji {
    display: inline !important;
    border: none !important;
    box-shadow: none !important;
    height: 1em !important;
    width: 1em !important;
    margin: 0 .07em !important;
    vertical-align: -0.1em !important;
    background: none !important;
    padding: 0 !important;
}
</style>
<link rel="stylesheet" id="parent-style-css" href="http://generation-co.co/wp-content/themes/twentyfifteen/style.css?ver=4.2.4" type="text/css" media="all">
<link rel="stylesheet" id="child-style-css" href="http://generation-co.co/wp-content/themes/generation-1-1/style.css?ver=4.2.4" type="text/css" media="all">
<link rel="stylesheet" id="twentyfifteen-fonts-css" href="//fonts.googleapis.com/css?family=Noto+Sans%3A400italic%2C700italic%2C400%2C700%7CNoto+Serif%3A400italic%2C700italic%2C400%2C700%7CInconsolata%3A400%2C700&amp;subset=latin%2Clatin-ext" type="text/css" media="all">
<link rel="stylesheet" id="genericons-css" href="http://generation-co.co/wp-content/plugins/jetpack/_inc/genericons/genericons/genericons.css?ver=3.1" type="text/css" media="all">
<link rel="stylesheet" id="twentyfifteen-style-css" href="http://generation-co.co/wp-content/themes/generation-1-1/style.css?ver=4.2.4" type="text/css" media="all">
<style id="twentyfifteen-style-inline-css" type="text/css">

        /* Custom Sidebar Text Color */
        .site-title a,
        .site-description,
        .secondary-toggle:before {
            color: #ffffff;
        }

        .site-title a:hover,
        .site-title a:focus {
            color: #ffffff; /* Fallback for IE7 and IE8 */
            color: rgba( 255, 255, 255, 0.7);
        }

        .secondary-toggle {
            border-color: #ffffff; /* Fallback for IE7 and IE8 */
            border-color: rgba( 255, 255, 255, 0.1);
        }

        .secondary-toggle:hover,
        .secondary-toggle:focus {
            border-color: #ffffff; /* Fallback for IE7 and IE8 */
            border-color: rgba( 255, 255, 255, 0.3);
        }

        .site-title a {
            outline-color: #ffffff; /* Fallback for IE7 and IE8 */
            outline-color: rgba( 255, 255, 255, 0.3);
        }

        @media screen and (min-width: 59.6875em) {
            .secondary a,
            .dropdown-toggle:after,
            .widget-title,
            .widget blockquote cite,
            .widget blockquote small {
                color: #ffffff;
            }

            .widget button,
            .widget input[type="button"],
            .widget input[type="reset"],
            .widget input[type="submit"],
            .widget_calendar tbody a {
                background-color: #ffffff;
            }

            .textwidget a {
                border-color: #ffffff;
            }

            .secondary a:hover,
            .secondary a:focus,
            .main-navigation .menu-item-description,
            .widget,
            .widget blockquote,
            .widget .wp-caption-text,
            .widget .gallery-caption {
                color: rgba( 255, 255, 255, 0.7);
            }

            .widget button:hover,
            .widget button:focus,
            .widget input[type="button"]:hover,
            .widget input[type="button"]:focus,
            .widget input[type="reset"]:hover,
            .widget input[type="reset"]:focus,
            .widget input[type="submit"]:hover,
            .widget input[type="submit"]:focus,
            .widget_calendar tbody a:hover,
            .widget_calendar tbody a:focus {
                background-color: rgba( 255, 255, 255, 0.7);
            }

            .widget blockquote {
                border-color: rgba( 255, 255, 255, 0.7);
            }

            .main-navigation ul,
            .main-navigation li,
            .secondary-toggle,
            .widget input,
            .widget textarea,
            .widget table,
            .widget th,
            .widget td,
            .widget pre,
            .widget li,
            .widget_categories .children,
            .widget_nav_menu .sub-menu,
            .widget_pages .children,
            .widget abbr[title] {
                border-color: rgba( 255, 255, 255, 0.1);
            }

            .dropdown-toggle:hover,
            .dropdown-toggle:focus,
            .widget hr {
                background-color: rgba( 255, 255, 255, 0.1);
            }

            .widget input:focus,
            .widget textarea:focus {
                border-color: rgba( 255, 255, 255, 0.3);
            }

            .sidebar a:focus,
            .dropdown-toggle:focus {
                outline-color: rgba( 255, 255, 255, 0.3);
            }
        }

</style>
<!--[if lt IE 9]>
<link rel='stylesheet' id='twentyfifteen-ie-css'  href='http://generation-co.co/wp-content/themes/twentyfifteen/css/ie.css?ver=20141010' type='text/css' media='all' />
<![endif]-->
<!--[if lt IE 8]>
<link rel='stylesheet' id='twentyfifteen-ie7-css'  href='http://generation-co.co/wp-content/themes/twentyfifteen/css/ie7.css?ver=20141010' type='text/css' media='all' />
<![endif]-->
<script type="text/javascript" src="http://generation-co.co/wp-includes/js/jquery/jquery.js?ver=1.11.2"></script><style type="text/css"></style>
<script type="text/javascript" src="http://generation-co.co/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1"></script>
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://generation-co.co/xmlrpc.php?rsd">
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://generation-co.co/wp-includes/wlwmanifest.xml"> 
<meta name="generator" content="WordPress 4.2.4">
    <style type="text/css">.recentcomments a{display:inline !important;padding:0 !important;margin:0 !important;}</style>
    <style type="text/css" id="twentyfifteen-header-css">
            .site-header {
            padding-top: 14px;
            padding-bottom: 14px;
        }

        .site-branding {
            min-height: 42px;
        }

        @media screen and (min-width: 46.25em) {
            .site-header {
                padding-top: 21px;
                padding-bottom: 21px;
            }
            .site-branding {
                min-height: 56px;
            }
        }
        @media screen and (min-width: 55em) {
            .site-header {
                padding-top: 25px;
                padding-bottom: 25px;
            }
            .site-branding {
                min-height: 62px;
            }
        }
        @media screen and (min-width: 59.6875em) {
            .site-header {
                padding-top: 0;
                padding-bottom: 0;
            }
            .site-branding {
                min-height: 0;
            }
        }
            .site-title,
        .site-description {
            clip: rect(1px, 1px, 1px, 1px);
            position: absolute;
        }
        </style>
    <style type="text/css" id="custom-background-css">
body.custom-background { background-color: #ffffff; }
</style>
</head>

<body class="home blog custom-background">
<div id="page" class="hfeed site">
    <a class="skip-link screen-reader-text" href="#content">Skip to content</a>

    <div id="sidebar" class="sidebar" style="position: fixed;">
        <header id="masthead" class="site-header" role="banner">
            <div class="site-branding">
                                        <h1 class="site-title"><a href="https://generation-co.co/" rel="home">Generation</a></h1>
                                            <p class="site-description">Beta</p>
                                    <button class="secondary-toggle">Menu and widgets</button>
            </div><!-- .site-branding -->
        </header><!-- .site-header -->

            <div id="secondary" class="secondary">



                    <div id="widget-area" class="widget-area" role="complementary">
                <aside id="search-2" class="widget widget_search"><form role="search" method="get" class="search-form" action="https://generation-co.co/">
                <label>
                    <span class="screen-reader-text">Search for:</span>
                    <input type="search" class="search-field" placeholder="Search …" value="" name="s" title="Search for:">
                </label>
                <input type="submit" class="search-submit screen-reader-text" value="Search">
            </form></aside>     <aside id="recent-posts-2" class="widget widget_recent_entries">        <h2 class="widget-title">Recent Posts</h2>      <ul>
                    <li>
                <a href="https://generation-co.co/index.php/2015/08/17/test-2/">Test 2</a>
                        </li>
                    <li>
                <a href="https://generation-co.co/index.php/2015/08/15/wordpress-resources-at-siteground/">WordPress Resources at SiteGround</a>
                        </li>
                </ul>
        </aside><aside id="recent-comments-2" class="widget widget_recent_comments"><h2 class="widget-title">Recent Comments</h2><ul id="recentcomments"><li class="recentcomments"><span class="comment-author-link"><a href="https://wordpress.org/" rel="external nofollow" class="url">Mr WordPress</a></span> on <a href="https://generation-co.co/index.php/2015/08/15/wordpress-resources-at-siteground/#comment-1">WordPress Resources at SiteGround</a></li></ul></aside><aside id="archives-2" class="widget widget_archive"><h2 class="widget-title">Archives</h2>       <ul>
    <li><a href="https://generation-co.co/index.php/2015/08/">August 2015</a></li>
        </ul>
</aside><aside id="categories-2" class="widget widget_categories"><h2 class="widget-title">Categories</h2>      <ul>
    <li class="cat-item cat-item-1"><a href="https://generation-co.co/index.php/category/uncategorized/">Uncategorized</a>
</li>
        </ul>
</aside>
<!-- Start - HTML Javascript Adder plugin v3.9 -->
<aside id="html_javascript_adder-3" class="widget widget_html_javascript_adder">
<div class="hjawidget textwidget">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
 /*!
  * classie - class helper functions
  * 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 */
 /*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);


 /**
  * main.js
  * http://www.codrops.com
  *
  * Licensed under the MIT license.
  * http://www.opensource.org/licenses/mit-license.php
  * 
  * Copyright 2014, Codrops
  * http://www.codrops.com
  */ (function () {

     var bodyEl = document.body,
         content = document.querySelector('.content-wrap'),
         openbtn = $(".menu-button").click(function () {
    $(this).next(".menu-wrap").toggleClass("show-menu");
}),
         closebtn = document.getElementById('close-button'),
         isOpen = false;

     function init() {
         initEvents();
     }

     function initEvents() {
         openbtn = $(".menu-button");
openbtn.click(function () {
       $(this).next(".menu-wrap").toggleClass("show-menu");
});
         if (closebtn) {
             closebtn.addEventListener('click', toggleMenu);
         }

         // close the menu element if the target it´s not the menu element or one of its descendants..
         content.addEventListener('click', function (ev) {
             var target = ev.target;
             if (isOpen && target !== openbtn) {
                 toggleMenu();
             }
         });
     }

     function toggleMenu() {
         if (isOpen) {
             classie.remove(bodyEl, 'show-menu');
         } else {
             classie.add(bodyEl, 'show-menu');
         }
         isOpen = !isOpen;
     }

     init();

 })();</script>
</div>
</aside><!-- End - HTML Javascript Adder plugin v3.9 -->
<aside id="meta-2" class="widget widget_meta"><h2 class="widget-title">Meta</h2>            <ul>
                        <li><a href="https://generation-co.co/wp-login.php">Log in</a></li>
            <li><a href="https://generation-co.co/index.php/feed/">Entries <abbr title="Really Simple Syndication">RSS</abbr></a></li>
            <li><a href="https://generation-co.co/index.php/comments/feed/">Comments <abbr title="Really Simple Syndication">RSS</abbr></a></li>
<li><a href="https://wordpress.org/" title="Powered by WordPress, state-of-the-art semantic personal publishing platform.">WordPress.org</a></li>           </ul>
</aside>            </div><!-- .widget-area -->

    </div><!-- .secondary -->

    </div><!-- .sidebar -->

    <div id="content" class="site-content">

    <div id="primary" class="content-area">
        <main id="main" class="site-main" role="main">




<article id="post-3" class="post-3 post type-post status-publish format-standard hentry category-uncategorized">

    <header class="entry-header">
        <h2 class="entry-title"><a href="https://generation-co.co/index.php/2015/08/17/test-2/" rel="bookmark">Test 2</a></h2>  </header><!-- .entry-header -->

    <div class="entry-content">
        <p><img src="https://igcdn-photos-h-a.akamaihd.net/hphotos-ak-xaf1/t51.2885-15/11809878_119652368381343_624710955_n.jpg" width="1080" height="1080" class="aligncenter"></p>
<p><br>
<button class="menu-button">Open Menu</button></p>
<div class="menu-wrap"></div>
<p><button class="menu-button" style="top: 560px;">Open Menu</button></p>
<div class="menu-wrap" style="top: 700px;">
</div>
<p></p>
    </div><!-- .entry-content -->


    <footer class="entry-footer">
        <span class="posted-on"><span class="screen-reader-text">Posted on </span><a href="https://generation-co.co/index.php/2015/08/17/test-2/" rel="bookmark"><time class="entry-date published" datetime="2015-08-17T22:02:36+00:00">August 17, 2015</time><time class="updated" datetime="2015-08-17T23:10:27+00:00">August 17, 2015</time></a></span><span class="comments-link"><a href="https://generation-co.co/index.php/2015/08/17/test-2/#respond">Leave a comment</a></span>           </footer><!-- .entry-footer -->

</article><!-- #post-## -->

<article id="post-1" class="post-1 post type-post status-publish format-standard hentry category-uncategorized">

    <header class="entry-header">
        <h2 class="entry-title"><a href="https://generation-co.co/index.php/2015/08/15/wordpress-resources-at-siteground/" rel="bookmark">WordPress Resources at SiteGround</a></h2>    </header><!-- .entry-header -->

    <div class="entry-content">
        <p>WordPress is an award-winning web software, used by millions of webmasters worldwide for building their website or blog. SiteGround is proud to host this particular WordPress installation and provide users with multiple resources to facilitate the management of their WP websites:</p>
<h3>Expert <a href="http://www.siteground.com/wordpress-hosting.htm">WordPress Hosting</a></h3>
<p>SiteGround provides superior WordPress hosting focused on speed, security and customer service. We take care of WordPress sites security with unique server-level customizations, WP auto-updates, and daily backups. We make them faster by regularly upgrading our hardware, offering free CDN with Railgun and developing our SuperCacher that speeds sites up to 100 times! And last but not least, we provide real WordPress help 24/7! Learn more about SiteGround WordPress hosting</p>
<h3>WordPress tutorial and knowledgebase articles</h3>
<p>WordPress is considered an easy to work with software. Yet, if you are a beginner you might need some help, or you might be looking for tweaks that do not come naturally even to more advanced users. SiteGround <a href="http://www.siteground.com/tutorials/wordpress/">WordPress tutorial</a> includes installation and theme change instructions, management of WordPress plugins, manual upgrade and backup creation, and more. If you are looking for a more rare setup or modification, you may visit <a href="http://kb.siteground.com">SiteGround Knowledgebase</a>.</p>
<h3><a href="http://www.siteground.com/wordpress-hosting/wordpress-themes.htm">Free WordPress themes</a></h3>
<p>SiteGround experts not only develop various solutions for WordPress sites, but also create unique designs that you could download for free. SiteGround WordPress themes are easy to customize for the particular use of the webmaster.</p>
    </div><!-- .entry-content -->


    <footer class="entry-footer">
        <span class="posted-on"><span class="screen-reader-text">Posted on </span><a href="https://generation-co.co/index.php/2015/08/15/wordpress-resources-at-siteground/" rel="bookmark"><time class="entry-date published updated" datetime="2015-08-15T00:43:01+00:00">August 15, 2015</time></a></span><span class="comments-link"><a href="https://generation-co.co/index.php/2015/08/15/wordpress-resources-at-siteground/#comments">1 Comment</a></span>           </footer><!-- .entry-footer -->

</article><!-- #post-## -->

        </main><!-- .site-main -->
    </div><!-- .content-area -->


    </div><!-- .site-content -->

    <footer id="colophon" class="site-footer" role="contentinfo">
        <div class="site-info">
                        <a href="https://wordpress.org/">Proudly powered by WordPress</a>
        </div><!-- .site-info -->
    </footer><!-- .site-footer -->

</div><!-- .site -->

<script type="text/javascript" src="http://generation-co.co/wp-content/themes/twentyfifteen/js/skip-link-focus-fix.js?ver=20141010"></script>
<script type="text/javascript">
/* <![CDATA[ */
var screenReaderText = {"expand":"<span class=\"screen-reader-text\">expand child menu<\/span>","collapse":"<span class=\"screen-reader-text\">collapse child menu<\/span>"};
/* ]]> */
</script>
<script type="text/javascript" src="http://generation-co.co/wp-content/themes/twentyfifteen/js/functions.js?ver=20150330"></script>



</body></html>
/*!
 * classie - class helper functions
 * 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 */
/*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);


 /**
   * main.js
   * http://www.codrops.com
   *
   * Licensed under the MIT license.
   * http://www.opensource.org/licenses/mit-license.php
   * 
   * Copyright 2014, Codrops
   * http://www.codrops.com
   */ 
(function () {

 var bodyEl = document.body,
     content = document.querySelector('.content-wrap'),
     openbtn = $(".menu-button").click(function () {
        $(this).next(".menu-wrap").toggleClass("show-menu");
     }),
     closebtn = document.getElementById('close-button'),
     isOpen = false;


 function init() {
     initEvents();
 }

 function initEvents() {
    for (var i=0; i< openbtn.length ; i++){
        openbtn[i].addEventListener('click', toggleMenu)
    }

     if (closebtn) {
         closebtn.addEventListener('click', toggleMenu);
     }

      // close the menu element if the target it´s not the menu element or         one of its descendants..
     if (content){
        content.addEventListener('click', function (ev) {
             var target = ev.target;
             if (isOpen && target !== openbtn) {
                 toggleMenu();
             }
         });
     }

 }

 function toggleMenu() {
     if (isOpen) {
         classie.remove(bodyEl, 'show-menu');
     } else {
         classie.add(bodyEl, 'show-menu');
     }
     isOpen = !isOpen;
    }

     init();

 })();