在引导程序中创建可折叠的垂直菜单

Question

我正在尝试使用引导程序创建可折叠菜单，而无需使用任何外部脚本。使用下面的代码，我已经成功完成了 95% 的路径，但是在单击顶级链接时，它会转到链接中的页面。我想以与下拉菜单相同的方式保留 href。所以删除它不是一种选择

我可以通过在 a 标签上使用 onClick="return false" 来修复它，但我认为它不再是有效的代码，或者至少是不好的做法。是否有一种简单的更好/替代方法可以在没有太多代码的情况下做到这一点。我的 javascript / jquery 不是很好。最好的解决方法是什么？

 <ul class="nav nav-pills nav-stacked left-menu" id="stacked-menu">
    <li>
      <a href="one.html" data-toggle="collapse" data-target="#item1" data-parent="#stacked-menu" >Process One<span class="caret arrow"></span></a>
      <ul class="nav nav-stacked collapse left-submenu" id="item1">
        <li><a href="google.com">View One</a></li>
        <li><a href="gmail.com">View Two</a></li>
      </ul>
    </li>
    <li>
      <a href="two.html" data-toggle="collapse" data-target="#item2" data-parent="#stacked-menu">Process Two<span class="caret arrow"></span></a>          
      <ul class="nav nav-pills nav-stacked collapse" id="item2">
        <li><a href="#">View One</a></li>
        <li><a href="#">View Two</a></li>
        <li><a href="#">View Three</a></li>
      </ul>
    </li>
    <li><a href="#">Process Three</a></li>
    <li><a href="#">Process Four</a></li>
  </ul>

我在 bootify 上做了一个示例。在示例中，顶部链接具有 onClick。 http://www.bootply.com/MQScKxhu9Z

我也试过 $('.submenu-link').click(function() { return false; });但这会完全禁用它。

Answer 1

以防万一其他人有这个问题...我发现下面的 jquery 解决了这个问题。

$('.submenu-link').click(function(e) {
    e.preventDefault();
});