我正在为我的WordPress网站添加一个CSS响应式动画手风琴式组合。我的JS文件出现在源代码中,但效果仍然不起作用。出于某种原因,JavaScript未执行。JS文件在源代码中显示,但JavaScript未执行?
这里是我的JS(/inc/js/accordion.js)
/*!
* classie - class helper functions
* from bonzo https://github.com/ded/bonzo
*
* 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 */
jQuery(document).ready(function($) {
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);
//fake jQuery
var $ = function(selector) {
return document.querySelector(selector);
}
var accordion = $('.accordion');
//add event listener to all anchor tags with accordion title class
accordion.addEventListener("click", function(e) {
e.stopPropagation();
e.preventDefault();
if (e.target && e.target.nodeName == "A") {
var classes = e.target.className.split(" ");
if (classes) {
for (var x = 0; x < classes.length; x++) {
if (classes[x] == "accordionTitle") {
var title = e.target;
//next element sibling needs to be tested in IE8+ for
any crashing problems
var content = e.target.parentNode.nextElementSibling;
//use classie to then toggle the active class which will
then open and close the accordion
classie.toggle(title, 'accordionTitleActive');
//this is just here to allow a custom animation to treat
the content
if (classie.has(content, 'accordionItemCollapsed')) {
if (classie.has(content, 'animateOut')) {
classie.remove(content, 'animateOut');
}
classie.add(content, 'animateIn');
} else {
classie.remove(content, 'animateIn');
classie.add(content, 'animateOut');
}
//remove or add the collapsed state
classie.toggle(content, 'accordionItemCollapsed');
}
}
}
}
});
//My CSS - Accordion Styling
@import url(http://fonts.googleapis.com/css?family=Lato:400,700);
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
font-family: 'Lato';
}
h1 {
text-align: center;
}
.accordion dl {
border: 1px solid #ddd;
}
.accordion dl:after {
content: "";
display: block;
height: 1em;
width: 100%;
background-color: #2ba659;
}
.accordion dt > a {
text-align: center;
font-weight: 700;
padding: 2em;
display: block;
text-decoration: none;
color: #fff;
-webkit-transition: background-color 0.5s ease-in-out;
}
.accordion dd {
background-color: #eee;
font-size: 1em;
line-height: 1.5em;
}
.accordion dd > p {
padding: 1em 2em 1em 2em;
}
.accordion {
position: relative;
background-color: #eee;
}
.container20 {
max-width: 960px;
margin: 0 auto;
padding: 2em 0 2em 0;
}
.accordionTitle {
background-color: #38cc70;
border-bottom: 1px solid #30bb64;
}
.accordionTitle:before {
content: "+";
font-size: 1.5em;
line-height: 0.5em;
float: left;
-moz-transition: -moz-transform 0.3s ease-in-out;
-o-transition: -o-transform 0.3s ease-in-out;
-webkit-transition: -webkit-transform 0.3s ease-in-out;
transition: transform 0.3s ease-in-out;
}
.accordionTitle:hover {
background-color: #2ba659;
}
.accordionTitleActive {
background-color: #2ba659;
}
.accordionTitleActive:before {
-webkit-transform: rotate(-225deg);
-moz-transform: rotate(-225deg);
transform: rotate(-225deg);
}
.accordionItem {
height: auto;
overflow: hidden;
}
@media all {
.accordionItem {
max-height: 50em;
-moz-transition: max-height 1s;
-o-transition: max-height 1s;
-webkit-transition: max-height 1s;
transition: max-height 1s;
}
}
@media screen and (min-width: 48em) {
.accordionItem {
max-height: 15em;
-moz-transition: max-height 0.5s;
-o-transition: max-height 0.5s;
-webkit-transition: max-height 0.5s;
transition: max-height 0.5s;
}
}
.accordionItemCollapsed {
max-height: 0;
}
.animateIn {
-webkit-animation-name: accordionIn;
-webkit-animation-duration: 0.65s;
-webkit-animation-iteration-count: 1;
-webkit-animation-direction: normal;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-fill-mode: both;
-webkit-animation-delay: 0s;
-moz-animation-name: normal;
-moz-animation-duration: 0.65s;
-moz-animation-iteration-count: 1;
-moz-animation-direction: alternate;
-moz-animation-timing-function: ease-in-out;
-moz-animation-fill-mode: both;
-moz-animation-delay: 0s;
-webkit-animation-name: accordionIn;
-webkit-animation-duration: 0.65s;
-webkit-animation-iteration-count: 1;
-webkit-animation-direction: normal;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-fill-mode: both;
-webkit-animation-delay: 0s;
}
.animateOut {
-webkit-animation-name: accordionOut;
-webkit-animation-duration: 0.75s;
-webkit-animation-iteration-count: 1;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-fill-mode: both;
-webkit-animation-delay: 0s;
-moz-animation-name: accordionOut;
-moz-animation-duration: 0.75s;
-moz-animation-iteration-count: 1;
-moz-animation-direction: alternate;
-moz-animation-timing-function: ease-in-out;
-moz-animation-fill-mode: both;
-moz-animation-delay: 0s;
-webkit-animation-name: accordionOut;
-webkit-animation-duration: 0.75s;
-webkit-animation-iteration-count: 1;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-fill-mode: both;
-webkit-animation-delay: 0s;
}
@-webkit-keyframes accordionIn {
0% {
opacity: 0;
-webkit-transform: scale(0.8);
}
100% {
opacity: 1;
-webkit-transform: scale(1);
}
}
@-moz-keyframes accordionIn {
0% {
opacity: 0;
-moz-transform: scale(0.8);
}
100% {
opacity: 1;
-moz-transform: scale(1);
}
}
@-webkit-keyframes accordionIn {
0% {
opacity: 0;
transform: scale(0.8);
}
100% {
opacity: 1;
transform: scale(1);
}
}
@-webkit-keyframes accordionOut {
0% {
opacity: 1;
-webkit-transform: scale(1);
}
100% {
opacity: 0;
-webkit-transform: scale(0.8);
}
}
@-moz-keyframes accordionOut {
0% {
opacity: 1;
-moz-transform: scale(1);
}
100% {
opacity: 0;
-moz-transform: scale(0.8);
}
}
@-webkit-keyframes accordionOut {
0% {
opacity: 1;
transform: scale(1);
}
100% {
opacity: 0;
transform: scale(0.8);
}
}
//And My HTML
<div class="container20">
<div class="accordion">
<dl>
<dt><a class="accordionTitle" href="#">First Accordion heading</a></dt>
<dd class="accordionItem accordionItemCollapsed">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eu interdum diam. Donec interdum porttitor risus non bibendum. Maecenas sollicitudin eros in quam imperdiet placerat. Cras justo purus, rhoncus nec lobortis ut, iaculis vel ipsum.
Donec dignissim arcu nec elit faucibus condimentum. Donec facilisis consectetur enim sit amet varius. Pellentesque justo dui, sodales quis luctus a, iaculis eget mauris.</p>
<p>Aliquam dapibus, ante quis fringilla feugiat, mauris risus condimentum massa, at elementum libero quam ac ligula. Pellentesque at rhoncus dolor. Duis porttitor nibh ut lobortis aliquam. Nullam eu dolor venenatis mauris placerat tristique eget
id dolor. Quisque blandit adipiscing erat vitae dapibus. Nulla aliquam magna nec elementum tincidunt.</p>
</dd>
<dt><a href="#" class="accordionTitle">Second Accordion heading</a></dt>
<dd class="accordionItem accordionItemCollapsed">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eu interdum diam. Donec interdum porttitor risus non bibendum. Maecenas sollicitudin eros in quam imperdiet placerat. Cras justo purus, rhoncus nec lobortis ut, iaculis vel ipsum.
Donec dignissim arcu nec elit faucibus condimentum. Donec facilisis consectetur enim sit amet varius. Pellentesque justo dui, sodales quis luctus a, iaculis eget mauris.</p>
<p>Aliquam dapibus, ante quis fringilla feugiat, mauris risus condimentum massa, at elementum libero quam ac ligula. Pellentesque at rhoncus dolor. Duis porttitor nibh ut lobortis aliquam. Nullam eu dolor venenatis mauris placerat tristique eget
id dolor. Quisque blandit adipiscing erat vitae dapibus. Nulla aliquam magna nec elementum tincidunt.</p>
</dd>
<dt><a href="#" class="accordionTitle">Third Accordion heading</a></dt>
<dd class="accordionItem accordionItemCollapsed">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eu interdum diam. Donec interdum porttitor risus non bibendum. Maecenas sollicitudin eros in quam imperdiet placerat. Cras justo purus, rhoncus nec lobortis ut, iaculis vel ipsum.
Donec dignissim arcu nec elit faucibus condimentum. Donec facilisis consectetur enim sit amet varius. Pellentesque justo dui, sodales quis luctus a, iaculis eget mauris.</p>
<p>Aliquam dapibus, ante quis fringilla feugiat, mauris risus condimentum massa, at elementum libero quam ac ligula. Pellentesque at rhoncus dolor. Duis porttitor nibh ut lobortis aliquam. Nullam eu dolor venenatis mauris placerat tristique eget
id dolor. Quisque blandit adipiscing erat vitae dapibus. Nulla aliquam magna nec elementum tincidunt.</p>
</dd>
</dl>
</div>
</div>
这是codepen,它工作正常那里,但如果你运行上面的代码中你”会发现手风琴缺少codepen上的功能。
这些效果不适用于我的WordPress站点或上述堆栈溢出片段,尽管我已将代码从codepen复制并粘贴到我的JS文件中。由于JS文件显示在我的WordPress网站的源代码中,我无法弄清楚为什么它没有执行。
难道问题在于我的JS文件如何落入DOM结构?我不知道。
html标记是一样的,因为是CSS(几个微小的变化)。
任何人都知道他们与JS的方式帮助我在这里?
包裹JS在jQuery的(文件)。就绪片段上方(函数($){ });你提供的;它仍然没有工作。有任何想法吗? – 2014-12-01 23:27:13
我很确定这是因为你的代码没有运行的jQuery不兼容。试着研究这个问题,否则只有当我看看运行的代码。 – nunorbatista 2014-12-01 23:28:54
如果您认为可以通过查看正在运行的代码来帮助我,我发布了一个指向该网站的链接。好吧,我会多一些谷歌,并继续修补它... – 2014-12-01 23:36:37