JS文件在源代碼中顯示，但JavaScript未執行？

Question

我正在爲我的WordPress網站添加一個CSS響應式動畫手風琴式組合。我的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的方式幫助我在這裏？

page in question

Answer 1

您的JavaScript未運行，因爲WordPress的與它加載其他庫的兼容性問題。要解決它，你可以看看這個link。

它背後的想法是WordPress中包含的jQuery庫設置爲noConflict（）模式。這是爲了防止WordPress可以鏈接的其他JavaScript庫的兼容性問題（我直接引用它們）。

在noConflict（）模式下，jQuery的全球$快捷方式不可用，那麼你可以使用：

jQuery(document).ready(function(){ 
    jQuery(#somefunction) ... 
}); 

這只是一個替代$的jQuery的問題。

如果你確實想要使用你的$，你可以將它包裝在下面的代碼中。

jQuery(document).ready(function($) { 
    // Inside of this function, $() will work as an alias for jQuery() 
    // and other libraries also using $ will not be accessible under this shortcut 
});