How to prevent # at the end of URL in a BootStrap Drop-down?

bootstrap jquery dependency
bootstrap functions
bootstrap 3 accordion
bootstrap javascript plugins
bootstrap data attributes
bootstrap 3.4 tooltip
bootstrap 3 tooltip
bootstrap plugins

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.


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.

Bootstrap 4 Dropdown, SubMenu) { <a class="dropdown-item" href="@Url.Content("~/" + There is a new "display" option that disables popper.js dropdown Use data-display="static​" to prevent popper.js from dynamically changing the dropdown position. aka. it's x-placement="bottom-end", you should use the "flip" option,  A dropdown menu is a toggleable menu that allows the user to choose one value from a predefined list: The .dropdown class indicates a dropdown menu. To open the dropdown menu, use a button or a link with a class of .dropdown-toggle and the data-toggle="dropdown" attribute. The .caret class creates a caret arrow icon ( ), which indicates that


According to the Bootstrap docs:

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

it is necessary to replace href by data-target attribute, i.e.

<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.

Dropdowns · Bootstrap, dropdown-toggle-split for proper spacing around the dropdown caret. We use this extra class to reduce the horizontal padding on either side of the caret by 25%  Hi, I want to prevent the dropdown from closing on click. I tried using e.stopPropagation() in the onClick function of the MenuItem component with no results. Is there a simple way I can do that?


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>

Javascript · Bootstrap, To keep URLs intact, use the data-target attribute instead of href="#" . <div class=​"dropdown">; <a class="dropdown-toggle" id="dLabel" role="button"  How to prevent (bootstrap) fixed top navigation from zooming on mobile Tag: jquery , css , html5 , mobile , twitter-bootstrap-3 When using the fixed top navigation of bootstrap 3, I noticed that when users use the native zoom on mobile, the top navigation also becomes very large.


Use this for Bootstrap + jQuery:

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

Components · Bootstrap, Bootstrap, a sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development. Change the url() paths in the compiled CSS. Use whatever option Add .disabled to a <li> in the dropdown to disable the link. Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They’re made interactive with the included Bootstrap dropdown JavaScript plugin. They’re toggled by clicking, not by hovering; this is an intentional design decision. Contents. Contents; Examples. Single button dropdowns; Split button dropdowns; Sizing


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.

Introduction · Bootstrap, Place the following <script> s near the end of your pages, right before the closing If you're at all unsure about the general page structure, keep reading for an  An example of Bootstrap dropdown is below. To handle this kind of drop-down we have to use findElements method and then we can run a for loop to get specific elements. Handle BootStrap Login/Popup window in Selenium. YouTube video for Handle Bootstrap Dropdown in Selenium


So You Need To Fill a Dropdown Dynamically, You have one dropdown menu, and depending on the user's choice in that one, You could have it right in your JavaScript that you are loading, or keep it in an Our query needs to end up something like this: The fancy trick here is to pass the getter.php file URL parameter which is the value from the first dropdown. Step 3: Set the media query breakpoints (to prevent navbar from collapsing) Find the variables.less file inside bootstrap, and starting around line 214 you will see the variables that control when the @media queries fire in your CSS. Change the mobile screen variables to 0. You can leave the desktop values, or any value which matches the container you just set.


The 10 Most Common Bootstrap Mistakes That Developers Make , There is a very well written Bootstrap documentation with many HTML, CSS, and The fact is that sometimes developers end up in the corner doing stuff This is the best way to avoid other components affecting the modal's Stack Overflow is how to make Bootstraps menu dropdown to open on hover, rather than on click. Bootstrap 4 Dropdowns Previous Next For a complete reference of all dropdown options, methods and events, go to our Bootstrap 4 JS Dropdown Reference.


Bootstrap 4 migration causing user-dropdown to stop working , Bootstrap 4 migration causing user-dropdown to stop working <span class="​dropdown-menu dropdown-menu-end" role="menu"> just grab the URL's for each language from below and use your own drop down list and  As you can see, the code uses Ajax and jQuery to post the content of the form to the server. Debugging any ASP.NET server-side code works as expected and, at the end of the day, the library saves you a lot of boilerplate code. The only exception is the behavior expected once the content of the form has been processed on the server.