我无法让这段 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);
})();
我现在将使用另一种解决方案,但我无法弄清楚为什么它不起作用。
请帮忙。
最佳答案
您可以:
- 使用 Chrome Network/Sources 检查是否加载了 JS 文件
- 使用
console.log
查看JS代码是否执行 - 使用 Chrome Debug 跟踪 JS 代码的运行情况
关于javascript - 无法让我的 Javascript 在 Joomla 中工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30090548/