用ClassieJS或jQuery切换第二个菜单？

Question

当前，代码被设置为为每个图标切换相同的菜单。

下面是我当前进度的小提琴，http://jsfiddle.net/2Lyttauv/

我想要实现的是为每个单独的图标添加一个独特的菜单。

我首先创建了以下HTML

<nav class="slider-menu slider-menu-vertical slider-menu-left" id="slider-menu-s1">
            <h3>MENU</h3>
     <a href="#"><span class="icon-flag"></span>Item 1</a>
     <a href="#"><span class="icon-flag"></span>Item 2</a>
            <a href="#"><span class="icon-flag"></span>Item 3</a>
            <a href="#"><span class="icon-flag"></span>Item 4</a>
            <a href="#"><span class="icon-flag"></span>Item 5</a>
      <a href="#"><span class="icon-flag"></span>Item 6</a>
      <a href="#"><span class="icon-flag"></span>Item 7</a>
        </nav>

现在我想添加第二个菜单到

navItem2

侧栏中的第二个图标。

我尝试使用上面的相同的HTML创建第二个菜单，除了我已经更改了id="slider-menu-s1并继续创建一个单独的函数，但这似乎不起作用。

如果有人能帮我或者指出正确的方向。

Answer 1

这是我做过的事。

<nav class="slider-menu slider-menu-vertical slider-menu-left" id="slider-menu-s2">
    <h3>Another Menu</h3>
    <a href="#"><span class="icon-flag"></span>Iteasdfasdfm 1</a>
</nav>

然后注意id，它是slider-menu-s2，这就是我在这里的navItemClick上的按钮中添加的内容。

        var anotherMenu = document.getElementById( 'slider-menu-s2' );

        navItem2.onclick = function() {
            classie.toggle( this, 'active' );
            classie.removeClass( menuLeft, 'slider-menu-open' ); //this is where you removeClass the other menu to close it
            classie.toggle( anotherMenu, 'slider-menu-open' );
            disableOther( 'navItem2' );
        };

希望这能回答你的问题。

这里是jsfiddle http://jsfiddle.net/2Lyttauv/20/