无法让我的Javascript在Joomla中工作

我在让这个Javascript代码在我的Joomla模板中工作时遇到了麻烦，我无法找出我做错了什么。请帮忙

这是我试图在“head”中引用的脚本标记：

<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/javascript/responsive_menu.js"></script>

这是我在'.js'中的Javascript：

(function () {

var nav = document.querySelector('.nav__toggle');
var toggleState = function (elem, one, two) {
    var elem = document.querySelector(elem);
    elem.setAttribute('data-state', elem.getAttribute('data-state') === one ? two : one);
};

nav.onclick = function (e) {
    toggleState('.navigation', 'closed', 'open');
    e.preventDefault();
};

// ES5
// nav.addEventListener('click', toggleState.bind(null, '.nav ul', 'closed', 'open'), false);

})();

我现在将使用另一种解决方案，但我不明白为什么这不起作用

请帮助。

您可以：

• 使用Chrome Network/Sources检查是否加载了JS文件
• 使用

  console.log

  检查JS代码是否执行
• 使用Chrome调试跟踪JS代码的运行方式

.navigation[data-state=closed] {
    min-height: 0;
    height: 70px;
    overflow: hidden;
}

.navigation[data-state=open] {
    height: 290px;
    -webkit-transition: height ease-out 1s;
    -moz-transition: height ease-out 1s;
    -o-transition: height ease-out 1s;
    transition: height ease-out 1s;
}

(function () {

var nav = document.querySelector('.nav__toggle');
var toggleState = function (elem, one, two) {
    var elem = document.querySelector(elem);
    elem.setAttribute('data-state', elem.getAttribute('data-state') === one ? two : one);
};

nav.onclick = function (e) {
    toggleState('.navigation', 'closed', 'open');
    e.preventDefault();
};

// ES5
// nav.addEventListener('click', toggleState.bind(null, '.nav ul', 'closed', 'open'), false);

})();