不能让我的Javascript在Joomla中工作

Question

I am having trouble getting this Javascript code to work inside my Joomla template and I cannot figure out what I am doing wrong. Please help.

This is the script tag im trying to reference in the 'head':

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

This is the main menu im adjusting in the '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>

This is the 'css' im trying to affect:

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

And here is my Javascript inside the '.js':

(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);

})();

I will use another solution for now but I cannot figure out why this is not working.

Please help.

Answer 1

You can:

• Use Chrome Network/Sources to check whether the JS file is loaded
• Use console.log to check whether the JS code is executed
• Use Chrome Debug to track how the JS code is run