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

我有一个可切换显示内外的功能性侧导航。这里是“过滤器”按钮...Bootstrap菜单切换不能用于多个切换链接

<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>

来源

2014-08-31 Suraj Kapoor

如果我理解正确的话，上述工程的代码;但是，如果您添加另一个侧面导航锚点，则代码将失败。如果这是正确的，请添加失败的代码。否则，请提供可能有助于描述问题的更多信息（和代码）。 – Pred 2014-08-31 21:09:55

@Pred我添加了失败的代码。谢谢！ – 2014-08-31 22:06:57

@SurajKapoor，你是否可以包含第二个切换链接，可能还有'＃wrapper' – 2014-08-31 22:08:54

添加类而不是用于多个元素的ID被操作的代码。

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

变化<a id="menu-toggle"></a>到<a class="menu-toggle"></a>

来源

2014-08-31 22:12:25

嗨，Brian，请参阅我上面的注释。我之前尝试过，它使第二个链接处于活动状态，但第一个链接处于非活动状态！ – 2014-08-31 22:22:35

嗨，我尝试将它添加到JsFiddle中，但它是复杂的，因为有框架，我从来没有使用过Fiddle。无论如何，你可以看到这里的HTML - http://talenthack.herokuapp.com/companies/。这是没有第二个链接（我想要下“Hiring：Business”）。希望这会给你一个更清晰的画面！ – 2014-09-01 01:16:55

确保你删除了以前的点击功能，并且实际上将类更改为ID（HTML需要更改为类以及jQuery选择器） ..我刚刚测试了上面的解决方案，它的工作。 – 2014-09-01 01:28:01

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

回答

相关问题