javascript - 如何防止 BootStrap 下拉列表中 URL 末尾的#？

Question

我有这个链接:

<a href="#" id="myBtn"><i class="icon-user"></i><span>Add user</span></a>

我使用 preventDefault() 和 return false 来避免地址末尾的 #。它完美地工作。问题是当我对 Bootstrap 的下拉菜单执行相同操作时。如果我保留 return false，它不会像预期的那样在末尾添加 #，但它也会阻止下拉列表消失，就像我删除 return false 时那样。 这是我的下拉代码:

<li class="dropdown">
  <a class="dropdown-toggle" data-toggle="dropdown" href="#" id="ddBtn">
    <i class="icon-wrench"></i><span>Parent Item<b class="caret"></b></span>
  </a>
  <ul class="dropdown-menu">
    <li><a href="#" id="ddSonBtn">Child item</a></li>

Javascript:

$("#ddSonBtn").click(function () {
    //some code

    e.preventDefault();
});

有解决办法吗？

我正在使用

Bootstrap 2
jQuery

谢谢。

Answer 1

根据 Bootstrap 文档:

http://getbootstrap.com/javascript/#dropdowns

需要用data-target属性替换href，即

<a data-target="#" id="myBtn"><i class="icon-user"></i><span>Add user</span></a>

我相信这是一种更“自举”的做事方式，而不是抑制事件处理程序或手动操纵显示/隐藏行为。