Bootstrap菜单切换不适用于多个切换链接

Question

我有一个功能性的侧面导航，可以切换显示和不显示。 这是“过滤器”按钮...

<a href="#menu-toggle" style="background-color:black; color:white;" class="btn btn-default page-header" id="menu-toggle">
   <span style="position:relative; top:2px; right: 5px;"class="glyphicon glyphicon-resize-horizontal"></span>
                        Filter</a>

和JQuery ...

<script>
    $("#menu-toggle").click(function(e) {
        e.preventDefault();
        $("#wrapper").toggleClass("toggled");
    });
</script>

当我添加另一个clickeable链接来切换同一菜单时，它会崩溃，但我不明白为什么？ 我已经将菜单切换ID更改为一个类，但这没有帮助。

这是无效的代码，即第二个可点击链接应具有相同的切换效果...

<li class="sidebar-brand">
     <a href="#" id="menu-toggle">Collapse
     </a>
</li> 

Answer 1

为要操作的多个元素添加一个类而不是一个ID。

$(".menu-toggle").click(function(e) {
    e.preventDefault();
    $("#wrapper").toggleClass("toggled");
});

将<a id="menu-toggle"></a>更改为<a class="menu-toggle"></a>