.addEventListener不是函數嗎？
[英].addEventListener is not a function?
問題描述
有人在Codepen中使用此腳本幫助了我，該腳本可以很好地工作，直到我嘗試將其實施到我的Wordpress網站中。
兩組灰點是按鈕。 每個按鈕將打開其自己的幻燈片菜單。
在控制台上，我收到此特定錯誤。 “ openbtn.addEventListener不是函數 ”
與以下代碼有關：
在codepen中，錯誤位於第104行
<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.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..
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>
我研究了人們在使用.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&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>
2 個解決方案
解決方案1
1 2015-08-17 23:55:48
您將openbtn定義為jQuery對象而不是dom對象。 您可以使用openbtn[0]來獲取dom元素，也可以使用帶有openbtn.on('click', function(){}) jQuery事件處理。
解決方案2
1 2015-08-18 00:20:06
問題是您試圖將addEventListner分配給對象數組，因此需要循環遍歷（一種或另一種方式）：
下面是工作代碼：
/*!
* 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();
})();
在反應中調用 addEventListener 內的 addEventListener 回調 function
[英]call addEventListener inside addEventListener callback function in react
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.
相關問題
addEventListener 不是函數？
在反應中調用 addEventListener 內的 addEventListener 回調 function
將addEventListener與方法中的函數一起使用
addEventListener沒有附加我的功能嗎？
JavaScript addEventListener函數語法
從“AddEventListener”啟動一個函數？
“ addEventListener不是函數”問題
x.addEventListener 不是函數嗎？
TypeError：$（…）.addEventListener不是函數
將.addEventListener添加到函數
相關標簽