10

我有这个链接：

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

我使用preventDefault()andreturn 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

谢谢。

4

6 回答 6

14

根据引导文档：

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

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

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

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

于 2015-02-07T09:07:50.193 回答
12

它可能有也可能没有很好的记录，但没有必要在 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。意思是，不会在目标元素的父元素上触发事件。

在使用事件时挑选并选择您需要的。在您的情况下，您可能只需要调用preventDefaultDropdown 的点击处理程序。

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

于 2013-04-08T13:49:34.977 回答
2

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

<a href="" id="myBtn"><i class="icon-user"></i><span>Add user</span></a>
于 2014-06-01T12:06:24.160 回答
0

将此用于 Bootstrap + jQuery：

$(this).parent().parent().parent().removeClass("open")
于 2016-03-10T00:58:39.530 回答
0

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

于 2018-09-10T21:36:23.963 回答
-1

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

jQuery ->
  $('.your_mark ul.dropdown-menu li').click ->
    # Do what you want
    $(this.parentElement.parentElement).removeClass('open')
    return false
  1. 通过从 btn-group div 中删除 css class 'open' 手动关闭下拉菜单。
  2. 返回 false 以避免在您的 url 中包含 # 。
于 2013-08-19T06:52:31.370 回答