javascript - 无法让我的 Javascript 在 Joomla 中工作

Question

我无法让这段 Javascript 代码在我的 Joomla 模板中运行，而且我无法弄清楚我做错了什么。请帮忙。

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

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

这是我在“html”中调整的主菜单:

<nav class="nav">
    <div data-state="closed" class="navigation">
        <a href="#" class="nav__toggle"></a>
        <img src="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template; ?>/images/arrow.png" alt="" class="arrow" />
        <jdoc:include type="modules" name="top" />
    </div>
</nav>

这是我试图影响的“css”:

.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;
}

这是我在“.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);

})();

我现在将使用另一种解决方案，但我无法弄清楚为什么它不起作用。

请帮忙。

Answer 1

您可以:

• 使用 Chrome Network/Sources 检查是否加载了 JS 文件
• 使用console.log查看JS代码是否执行
• 使用 Chrome Debug 跟踪 JS 代码的运行情况