加载时出现JavaScript问题

-4

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

<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>

来源

2017-10-17 Jake P

你需要澄清这一点：*“JS似乎没有加载在页面上”*。有什么症状？什么导致你得出这个结论？ – kryger

在你的dom准备好之前，Javascript正在运行。将JS放在主体底部或添加onLoad回调。你的菜单不工作，因为选择器为空（由错误符合我们的团队：274未捕获TypeError：无法读取属性为null 在meet-our-team：274） –

@kryger的属性'链接到它应该如何工作的例子。 –

-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标签内。

来源

2017-10-17 15:02:04 Techniv

我做了这些修改，现在我在'document.addEventListner（'DOMContentLoaded'，function（）{'该函数不存在。 –

对不起，输入错误，它是'addEventListener' – Techniv

谢谢你的纠正，但是JavaScript仍然不能工作，这里是codepen模板，它显示了JS应该如何反应：https://codepen.io/anon/pen/eGQExQ –

加载时出现JavaScript问题

回答

相关问题