Question

I’m using mootools to do this: i have a ul that looks like this

<ul>
    <li><a class="option">TEXT</a></li>
    <li><a class="option">TEXT</a></li
    <li><a class="option">TEXT</a></li>
    <li><a class="option">TEXT</a></li>
</ul>

I want to have the class to change when a li has been clicked from ‘option’ to ‘option-selected’, my current code looks like the following

$$('li.option').addEvent('click', function(el){
    this.toggleClass('option-selected');
});

This does work but my issue is how to on click event have the other li class’ revert back to the class option and leave the current clicked li class set to option-selected?

Answer 1

(function () {
    var list = document.id('menu'),
        os = 'option-selected';

    menu.addEvent('click:relay(li .option)', function (e, el) {
        e.preventDefault();
        menu.getElements('.' + os).removeClass(os);
        el.addClass(os);
    });
}());

can play with it / tweak it here. http://jsfiddle.net/dimitar/nYEkj/

it anchors to the ul element, only attaches 1 event to that via event delegation. depends on what your strategy is – adding the classes to the li or to to As