如何防止BootStrap Drop-down中URL末尾的＃？

Question

I have this link:

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

I use preventDefault() and return false to avoid the # at the end of my address. And it works perfectly. The problem is when I do the same with Bootstrap's dropdown. If I leave return false it doesn't add the # at the end as supposed, but it also prevents the dropdown from disappearing as it would if I remove return false . This is my dropdown code:

<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();
});

Is there a solution for this?

I am using

Bootstrap 2
jQuery

Thanks.

Answer 1

It may or may not be well documented, but there's no need to call both preventDefault() and return false; in jQuery events.

EDIT : From jQuery's on docs: "Returning false from an event handler will automatically call event.stopPropagation() and event.preventDefault() " ( http://api.jquery.com/on/#event-handler )

return false; is the equivalent of e.preventDefault(); and e.stopPropagation();

preventDefault prevents the default behavior of an element - such as a submit button submitting a form, an anchor navigating to a specific href , etc.

stopPropagation stops the event from bubbling up the DOM. Meaning, events won't be triggered on parent elements of the target element.

Pick and choose which you need when working with Events. In your situation, you probably only need to call preventDefault in your Dropdown's click handler.

Also, in your code, the use of return in a function's scope is the last line of execution. Any code after it will not be executed when the function is run.

Answer 2

According to the Bootstrap docs:

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

it is necessary to replace href by data-target attribute, ie

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

I believe it is more "bootstrapish" way to do things rather than suppressing event handlers or manually manipulating the show/hide behavior.

Answer 3

Just remove the # value from the href attribute. It's valid HTML to leave href empty.

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

Answer 4

用于Bootstrap + jQuery：

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

Answer 5

I had the same issue and after much searching realised it was my own error. I had an incorrect link to the bootstrap js file (the integrity hash was incorrect) and therefore didn't load. This caused the dropdown not to work on some pages.

Answer 6

I tried this way and it worked. The example (coffee script) is like this;

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

1. Close the dropdown menu manually by removing css class 'open' from the btn-group div.
2. Return false to avoid having # in your url.