Simple example of i-bem.js usage to one way of behaviour driven development. See http://toddmotto.com/stop-toggling-classes-with-js-use-behaviour-driven-dom-manipulation-with-data-states/#comment-1170723194 for refer

nav.css

.nav
{
    background: #2284B5;
    color: #fff;
    border-radius: 3px;
}

.nav__toggle
{
    padding: 5px 10px;
    display: block;
    color: #fff;
    text-decoration: none;
}

.nav__list {
    list-style: none;
    margin: 0;
    padding: 0;
}


/* style for element `list` of `nav` block \w `closed` modifier */
.nav__list_closed
{
    display: none;
}

/* style for element `list` of `nav` block \w `opened` modifier */
.nav__list_opened
{
    display: inherit;
}

/* etc */

nav.html

<nav class="nav i-bem" data-bem="nav">
    <a href="#" class="nav__toggle">Menu</a>
    <ul class="nav__list">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
    </ul>
</nav>

nav.js

/**
 * NOTE: we use `i-bem.js` from [bem-core](https://github.com/bem/bem-core) library
 * @see http://bem.info
 */

/**
 * `nav` block declaration
 */
BEM.DOM.decl('nav', {
    // we don't need any special block's instance method
    // so it could stay blank
}, {

    live : function() {
        // Bind to `click` event emited on `__toggle` elem
        this.liveBindTo('toggle', 'click', function() {
            /**
             * @this {BEM.DOM} 
             * in callback `this` will refer to the block instanse
             */
            
            // toggle `_closed/_opend` mod on `__list` elem in callback
            this.toggleMod('list', 'closed', 'opened');
        }
    });

});