如何防止 # 在 BootStrap 下拉列表中的 URL 末尾？答案

【问题标题】：How to prevent # at the end of URL in a BootStrap Drop-down?如何防止 # 在 BootStrap 下拉列表中的 URL 末尾？
【发布时间】：2013-04-08 13:45:05
【问题描述】：

我有这个链接：

<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

谢谢。

【问题讨论】：

...还有你的 Javascript 代码？
@MassivePenguin 与平常没什么不同，但我根据您的要求更新了我的问题。

标签： javascript jquery css twitter-bootstrap

【解决方案1】：

根据 Bootstrap 文档：

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

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

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

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

【讨论】：

谢谢！我正在使用 Bootstrap 折叠并且文本锚不会导致 #anchor 附加到浏览器 URL，但是，具有相同锚的字体真棒图标导致 #anchor 被附加，所以我交换了数据的 href -target 一切正常！

【解决方案2】：

它可能有也可能没有很好的记录，但没有必要在 jQuery 事件中同时调用 preventDefault() 和 return false;。

编辑：来自 jQuery 的 on 文档：“从事件处理程序返回 false 将自动调用 event.stopPropagation() 和 event.preventDefault()”（http://api.jquery.com/on/#event-handler）

return false; 相当于e.preventDefault(); 和e.stopPropagation();

preventDefault 阻止元素的默认行为 - 例如提交表单的提交按钮、导航到特定 href 的锚点等。

stopPropagation 阻止事件冒泡 DOM。也就是说，不会在目标元素的父元素上触发事件。

挑选您在使用事件时需要的内容。在您的情况下，您可能只需要在 Dropdown 的点击处理程序中调用 preventDefault。

另外，在您的代码中，在函数范围内使用return 是执行的最后一行。其后的任何代码不会在函数运行时执行。

【讨论】：

嗨伊恩，谢谢，但实际上不是，如果我只打电话给preventDefault，正如我在问题中所说，它会在地址末尾添加#。谢谢
我已经尝试只使用return false 它确实有效，而不是添加#，但它仍然可以防止下拉菜单消失。 :(
@eestein 好吧，我不确定它是否应该添加#。如果您绑定到正确的元素并正确地做事，它就会正常工作。无论如何，您提供的 HTML 与您的 Javascript 不匹配。您正在将单击事件绑定到具有“xptoBtn”的id 的元素，但我在您的 HTML 中看不到该元素。您不应该使用return false;，因为它实际上调用了stopPropagation()，它会停止冒泡，因此不会让Bootstrap 正确处理事件。您应该只在正确的位置使用preventDefault。请发布您的实际代码
我根据您的要求更新了。但我没有说它在最后添加#，请重新阅读我的评论。我说的是它有效，而不是在最后添加#，但它仍然可以防止下拉菜单在点击后消失。感谢您的宝贵时间。
伊恩，很抱歉我误读了您的评论。我刚刚用preventDefault 重试，它的发生与我在第一条评论中所说的一样。我确实允许引导程序隐藏下拉菜单，但它在末尾添加了#。

【解决方案3】：

只需从href 属性中删除# 值。将 href 留空是有效的 HTML。

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

【讨论】：

现在因为这被否决了，我很感兴趣为什么这不是一个好的解决方案。对我来说，它在所有当前浏览器中都像一个魅力，正如预期的那样。但也许我没有看到全貌，所以我很好奇......
虽然我绝对不容忍使用 javascript 伪协议，但空的 href 是一个合适的解决方案。帮助了我——谢谢！
@JAAulde 谢谢，你说得对，我的帖子读起来好像javascript解决方案等于空href，而我的意图是提供另一种选择，如果空href不是某些人的选择原因。再次考虑之后，我决定删除这个替代方案（正如您现在已经确认，更好/更清洁的解决方案无论如何都可以做到）。
请注意，如果您删除# 值，您需要明确禁用e.preventDefault() 的链接，否则页面将重新加载。

【解决方案4】：

将此用于 Bootstrap + jQuery：

$(this).parent().parent().parent().removeClass("open")

【讨论】：

【解决方案5】：

我遇到了同样的问题，经过大量搜索后意识到这是我自己的错误。我的引导 js 文件链接不正确（完整性哈希不正确），因此没有加载。这导致下拉菜单在某些页面上不起作用。

【讨论】：

【解决方案6】：

我尝试过这种方法，它奏效了。例子（咖啡脚本）是这样的；

jQuery ->
  $('.your_mark ul.dropdown-menu li').click ->
    # Do what you want
    $(this.parentElement.parentElement).removeClass('open')
    return false

通过从 btn-group div 中删除 css 类“open”来手动关闭下拉菜单。
返回 false 以避免在您的 url 中包含 #。

【讨论】：