加载时的 JavaScript 问题答案

【问题标题】：JavaScript Issues when Loading加载时的 JavaScript 问题
【发布时间】：2017-10-17 14:50:31
【问题描述】：

我正在尝试向我公司的网站添加手风琴菜单，由于某种原因，HTML 和 CSS 加载正常，但页面上似乎没有加载 JS。我正在使用适用于 Code Pen 的模板，所以我认为这很可能是我将 JS 放入何处/如何放入的问题。有什么建议吗？我已将以下代码放入网页https://www.nlfxpro.com/meet-our-team/部分：

<script>
/*!
 * classie - class helper functions
 * from bonzo https://github.com/ded/bonzo
 */


( 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 = $('.acc');





//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] == "acc_title") {
          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, 'acc_title_active');
          //this is just here to allow a custom animation to treat the content
          if(classie.has(content, 'acc_panel_col')) {
            if(classie.has(content, 'anim_out')){
              classie.remove(content, 'anim_out');
            }
            classie.add(content, 'anim_in');

          }else{
             classie.remove(content, 'anim_in');
             classie.add(content, 'anim_out');
          }
          //remove or add the collapsed state
          classie.toggle(content, 'acc_panel_col');




        }
      }
    }

  }
});
</script>

【问题讨论】：

您需要澄清这一点：“页面上似乎没有加载 JS”。有什么症状？是什么让您得出这个结论？
Javascript 在你的 dom 准备好之前运行。将 JS 放在 body 的底部或添加 onLoad 回调。您的菜单不起作用，因为选择器为空（由错误 meet-our-team:274 Uncaught TypeError: Cannot read property 'addEventListener' of null at meet-our-team:274 表示）
@kryger 请在下面查看我的评论，并附有指向它应该如何工作的示例的链接。
@mr.void 我将 JS 移到的底部，虽然不再有错误，但 javascript 并没有导致手风琴菜单展开。

标签： javascript jquery html css

【解决方案1】：

您的代码在加载 DOM 之前执行。

检查你的 HTML 结构。

<!html>
<html>
  <head>
    <!-- Here your style, title, meta -->
    <!-- Here your JS library if need -->
  </head>
  <body>
  <!-- Here your html -->
  <!-- Here your JS code -->
  </body>
</html>

尝试将您的 JavaScript 代码封装在 DOM 就绪的侦听器中

<script>
  document.addEventListener('DOMContentLoaded', function(){
    // Here your JS code
  });
</script>

当 DOM 准备好使用时触发此事件。

更新第二步

正如它在您的model 中所写的那样。 A 标签必须在 DT 标签内。

【讨论】：

我进行了这些更改，现在我在 'document.addEventListner('DOMContentLoaded', function(){' 上收到错误，表明该函数不存在。
抱歉，输入错误。这是addEventListener
感谢您的更正，但不幸的是，javascript 仍然无法正常工作。这是 codepen 模板，它显示了 JS 应该如何反应：codepen.io/anon/pen/eGQExQ
你对我的回答投了反对票，因为我已经迈出了解决你问题的第一步……太公平了……
@JakeP 好的，抱歉。