LJS_introduction-browser-events

by Anton Kolesnikov

HTML

<div id="sweeties" class="menu">
    <span id="sweeties-title" class="title">Сладости (нажми меня</span>
    <ul>
        <li>Пирог</li>
        <li>Пончик</li>
        <li>Мед</li>
    </ul>
</div>

CSS

.menu ul {
    display: none;
}
.menu .title {
    padding-left: 16px;
    font-size: 18px;
}

.menu-open .title {
    
}
.menu-open ul {
    display: block;
}

JavaScript

var titleElem = document.getElementById('sweeties-title');

titleElem.onclick = function() {
    var menu = this.ParentNode;
    if (hasClass(menu, 'menu-open')) {
        removeClass(menu, 'menu-open');
    } else {
        addClass(menu, 'menu-open');
    };
    
    function addClass(el, cls) {
        for(var c = el.className.split(' '), i = c.length - 1; i>=0; i--) {
            if (c[i] == cls) return;
        }
        if (el.className == "") el.className = cls
        else el.className += ' '+cls
    } // End ADD function