Develop Reference

Keeping the dropdown open after selecting dropdown element bootstrap [duplicate]

I use a bootstrap dropdown as a shoppingcart. In the shopping cart is a 'remove product' button (a link). If I click it, my shoppingcart script removes the product, but the menu fades away. Is there anyway way to prevent this? I tried e.startPropagation, but that didn't seem to work:
<div id="shoppingcart" class="nav-collapse cart-collapse">
<ul class="nav pull-right">
<li class="dropdown open">
<a href="#" data-toggle="dropdown" class="dropdown-toggle">Totaal:
€ 43,00</a>
<ul class="dropdown-menu">
<li class="nav-header">Pakketten</li>
<li>
<span class="quantity">1x</span>
<span class="product-name">Test Product </span>
<span class="product-remove"><a class="removefromcart" packageid="4" href="#">x</a>
</span></li>
<li>Total: € 43,00</li>
<li>Checkout</li>
</ul>
</li>
</ul>
As you can see tha element with class="dropwdown-toggle" made it a dropdown. Another idea was that I just reopen it on clicking programmatically. So if someone can explain me how to programmatically open a Bootstrap dropdown, it would help well!

Try removing the propagation on the button itself like so:
$('.dropdown-menu a.removefromcart').click(function(e) {
e.stopPropagation();
});
Edit
Here is a demo from the comments with the solution above:
http://jsfiddle.net/andresilich/E9mpu/
Relevant code:
JS
$(".removefromcart").on("click", function(e){
var fadeDelete = $(this).parents('.product');
$(fadeDelete).fadeOut(function() {
$(this).remove();
});
e.stopPropagation();
});
HTML
<div id="shoppingcart" class="nav-collapse cart-collapse">
<ul class="nav pull-right">
<li class="dropdown open">
<a href="#" data-toggle="dropdown" class="dropdown-toggle">Totaal:
€ 43,00</a>
<ul class="dropdown-menu">
<li class="nav-header">Pakketten</li>
<li class="product">
<span class="product-remove"><a class="removefromcart" packageid="2" href="#"><i class="icon-remove"></i></a></span>
<span class="product-name">Test Product </span>
<span class="quantity"><span class="badge badge-inverse">1</span></span>
</li>
<li class="product">
<span class="product-remove"><a class="removefromcart" packageid="2" href="#"><i class="icon-remove"></i></a></span>
<span class="product-name">Test Product </span>
<span class="quantity"><span class="badge badge-inverse">10</span></span>
</li>
<li class="product">
<span class="product-remove"><a class="removefromcart" packageid="2" href="#"><i class="icon-remove"></i></a></span>
<span class="product-name">Test Product </span>
<span class="quantity"><span class="badge badge-inverse">8</span></span>
</li>
<li class="product">
<span class="product-remove"><a class="removefromcart" packageid="2" href="#"><i class="icon-remove"></i></a></span>
<span class="product-name">Test Product </span>
<span class="quantity"><span class="badge badge-inverse">3</span></span>
</li>
<li class="product">
<span class="product-remove"><a class="removefromcart" packageid="2" href="#"><i class="icon-remove"></i></a></span>
<span class="product-name">Test Product </span>
<span class="quantity"><span class="badge badge-inverse">4</span></span>
</li>
<li class="divider"></li>
<li>Total: € 43,00</li>
<li>Checkout</li>
</ul>
</li>
</ul>

This answer is just a sidenote to the accepted answer. Thanks to both the OP and Andres for this Q & A, it solved my problem. Later, however, I needed something that worked with dynamically added items in my dropdown. Anyone coming across this one might also be interested in a variation Andres' solution that works both with the initial elements as well as elements added to the dropdown after the page has loaded:
$(function() {
$("ul.dropdown-menu").on("click", "[data-keepOpenOnClick]", function(e) {
e.stopPropagation();
});
});
Or, for dynamically created dropdown menus:
$(document).delegate("ul.dropdown-menu [data-keepOpenOnClick]", "click", function(e) {
e.stopPropagation();
});
Then just put the data-keepOpenOnClick attribute anywhere in any of the <li> tags or its child elements, depending on your situation. E.G.:
<ul class="dropdown-menu">
<li>
<-- EG 1: Do not close when clicking on the link -->
<a href="#" data-keepOpenOnClick>
...
</a>
</li>
<li>
<-- EG 2: Do not close when clicking the checkbox -->
<input type="checkbox" data-keepOpenOnClick> Pizza
</li>
<-- EG 3: Do not close when clicking the entire LI -->
<li data-keepOpenOnClick>
...
</li>
</ul>

On bootstrap 4, when you put a form inside the dropdown menu, it won't collapse when clicking inside of it.
So this worked best for me:
<div class="dropdown">
<!-- toggle button/link -->
<div class="dropdown-menu">
<form>
<!-- content -->
</form>
</div>
</div>

In short, You can try this. It is working for me.
<span class="product-remove">
<a class="removefromcart" onclick=" event.stopPropagation();" packageid="4" href="#">x</a>
</span>

The menu opens when you give show class to the menu, so you can implement the function yourself without using data-toggle="dropdown".
<div class="dropdown">
<button class="btn btn-secondary" type="button">
Dropdown button
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<div id="overlay"></div>
#overlay{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 1000;
display: none;
}
#overlay.show{
display: block;
}
.dropdown-menu{
z-index: 1001;
}
$('button, #overlay').on('click', function(){
$('.dropdown-menu, #overlay').toggleClass('show')
})
Try this in codepen.

I was having the same problem with an accordion/toggle sub-menu that was nested within a dropdown-menu in Bootstrap 3. Borrowed this syntax from the source code to stop all collapse toggles from closing the dropdown:
$(document).on(
'click.bs.dropdown.data-api',
'[data-toggle="collapse"]',
function (e) { e.stopPropagation() }
);
You can replace [data-toggle="collapse"] with whatever you want to stop closing the form, similar to how #DonamiteIsTnt added a property to do so.

I wrote some lines of code that make it works as perfect as we need with more of control on it:
$(".dropdown_select").on('hidden.bs.dropdown', function () {
if($(this).attr("keep-open") == "true") {
$(this).addClass("open");
$(this).removeAttr("keep-open");
}
});
$(".dropdown_select ul li").bind("click", function (e) {
// DO WHATEVER YOU WANT
$(".dropdown_select").attr("keep-open", true);
});

dropdown javascript for bulma framework

i have the following problem, i am trying to use two dropdowns using javascript and bulma framework
but the problem is that only one dropdown is displayed when I click on it but if I click on the second one it doesn't open.
<div class="dropdown">
<div class="dropdown-trigger">
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
<span>Dropdown button</span>
<span class="icon is-small">
<i class="fas fa-angle-down" aria-hidden="true"></i>
</span>
</button>
</div>
<div class="dropdown-menu" id="dropdown-menu" role="menu">
<div class="dropdown-content">
<a href="#" class="dropdown-item">
Dropdown item
</a>
<a class="dropdown-item">
Other dropdown item
</a>
<a href="#" class="dropdown-item is-active">
Active dropdown item
</a>
<a href="#" class="dropdown-item">
Other dropdown item
</a>
<hr class="dropdown-divider">
<a href="#" class="dropdown-item">
With a divider
</a>
</div>
</div>
</div>
<div class="dropdown">
<div class="dropdown-trigger">
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
<span>Dropdown button</span>
<span class="icon is-small">
<i class="fas fa-angle-down" aria-hidden="true"></i>
</span>
</button>
</div>
<div class="dropdown-menu" id="dropdown-menu" role="menu">
<div class="dropdown-content">
<a href="#" class="dropdown-item">
Dropdown item
</a>
<a class="dropdown-item">
Other dropdown item
</a>
<a href="#" class="dropdown-item is-active">
Active dropdown item
</a>
<a href="#" class="dropdown-item">
Other dropdown item
</a>
<hr class="dropdown-divider">
<a href="#" class="dropdown-item">
With a divider
</a>
</div>
</div>
</div>
JavaScript Code:
var dropdown = document.querySelector('.dropdown');
dropdown.addEventListener('click', function(event) {
event.stopPropagation();
dropdown.classList.toggle('is-active');
});
I have the respective libraries loaded both bulma and jquery, but I still can't get both dropdowns to work.

You are on the right track, but you're using .querySelector() incorrectly. See the docs:
The querySelector() method returns the first element that matches a specified CSS selector(s) in the document
Emphasis mine.
The solution is to use .querySelectorAll(). This will return an array of all the dropdowns. You can then iterate through them and attach an eventlistener to them.
document.querySelectorAll('.dropdown').forEach(item => {
item.addEventListener('click', function(event) {
event.stopPropagation();
item.classList.toggle('is-active');
});
});

How to handle click on Bulma's dropdown component?

I'm using bulma in an application and I have a dropdown as follows:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.css">
<div class="dropdown">
<div class="dropdown-trigger">
<button class="button"
onclick="javascript:document.querySelector('.dropdown').classList.toggle('is-active')"
onblur="javascript:document.querySelector('.dropdown').classList.toggle('is-active')" aria-haspopup="true" aria-controls="dropdown-menu">
<span>Dropdown button</span>
<span class="icon is-small">
<i class="fas fa-angle-down" aria-hidden="true"></i>
</span>
</button>
</div>
<div class="dropdown-menu" id="dropdown-menu" role="menu">
<div class="dropdown-content">
<a href="#" onclick="javascript:alert('clicked')" class="dropdown-item">
Dropdown item
</a>
<a class="dropdown-item" onclick="javascript:alert('clicked')">
Other dropdown item
</a>
<a href="#" onclick="javascript:alert('clicked')" class="dropdown-item is-active">
Active dropdown item
</a>
<a href="#" onclick="javascript:alert('clicked')" class="dropdown-item">
Other dropdown item
</a>
<hr class="dropdown-divider">
<a href="#" onclick="javascript:alert('clicked')" class="dropdown-item">
With a divider
</a>
</div>
</div>
</div>
I have the onblur event handler so it will close the dropdown when the user clicks outside of it, but then when the user clicks one of the items from the dropdown the blur event gets triggered and the onclick from the item doesn't. How should I handle this?

The click event is triggered the moment you click and release. You can use a onmousedown event instead so that you get to click the item before the blur get triggered:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.css">
<div class="dropdown">
<div class="dropdown-trigger">
<button class="button"
onclick="javascript:document.querySelector('.dropdown').classList.toggle('is-active')"
onblur="javascript:document.querySelector('.dropdown').classList.toggle('is-active')" aria-haspopup="true" aria-controls="dropdown-menu">
<span>Dropdown button</span>
<span class="icon is-small">
<i class="fas fa-angle-down" aria-hidden="true"></i>
</span>
</button>
</div>
<div class="dropdown-menu" id="dropdown-menu" role="menu">
<div class="dropdown-content">
<a href="#" onmousedown="javascript:alert('clicked')" class="dropdown-item">
Dropdown item
</a>
<a class="dropdown-item" onmousedown="javascript:alert('clicked')">
Other dropdown item
</a>
<a href="#" onmousedown="javascript:alert('clicked')" class="dropdown-item is-active">
Active dropdown item
</a>
<a href="#" onmousedown="javascript:alert('clicked')" class="dropdown-item">
Other dropdown item
</a>
<hr class="dropdown-divider">
<a href="#" onmousedown="javascript:alert('clicked')" class="dropdown-item">
With a divider
</a>
</div>
</div>
</div>
Of course the above is assuming that you would want to close the dropdown the moment you click on one of the menu items.

clicking on drop down menu with href="#nav" using doubletaptogo.js causes page to jump down

I have a responsive page with a drop down navigation using doubletaptogo.js, problem is when I click on the #nav link to show the drop down items this causes the page to scroll down so the menu is now at the top of the page.
here is the page: http://goligraphist.com.au/development
I have found that when I remove all the content below the nav this issue is fixed but this obviously isn't an option. I'm new to javascript and this has really got me stuck, any ideas?
Sample Code :
<nav id="nav" role="navigation">
<a href="#nav" title="show menu" class="menu-button">
<img src="img/menu.png" alt="menu icon">
</a>
<a href="#" title="hide menu" class="menu-button">
<img src="img/menu.png" alt="menu icon">
</a>
<ul>
<li class="active">
Home
</li>
<li>
Portfolio
</li>
<li>
Contact
</li>
</ul>
</nav>
jQuery Script :
<script src="js/doubletaptogo.js"></script>
<script>
$( function() {
$( '#nav li:has(ul)' ).doubleTapToGo();
});
</script>

Putting the following code within DOM ready should stop your page from jumping:
$('[href^=\\#]').on('click', function(event){
event.stopPropagation();
});

I can see what the issue is here.. You have defined the nav further down the page under the main site image, have you tried moving it right at the top of the page so it defaults to this place?
Also have you tried alternatives - I have achieved this same thing using bootstrap:
<nav id="Navbar" class="navbar navbar-fixed-top navbar-inverse" role="navigation" >
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="define-spinner">
</div>
<a class="homeLogo" href="#/"><i class="fa fa-home fa-2x icon-color fa-inverse"></i></a>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse" role="navigation">
<ul class="nav navbar-nav">
<li class="controller">
<div id="h2Header"><g:message code="default.title" args="[meta(name:'app.name')]"/> </div>
</li>
</ul>
<ul class="nav navbar-nav navbar-right" >
<li class="dropdown controller">
<a class="dropdown-toggle" role="button" data-toggle="dropdown">
<span id="userMessage">
<span class="glyphicon glyphicon-user"></span>
<g:message code="default.user.label" default="{{user.username}}" />
</span>
<b class="caret"></b>
</a>
<ul class="dropdown-menu dropdown-menu-dark" role="menu">
<li>
<a class="fa fa-gear icon-color" onclick='window.location.href="#/updateusername"' title="${message(code: 'default.username.update', default: 'Update Username')}">
<g:message code="default.username.update" default="Update Username"/>
</a>
</li>
<li>
<a class="fa fa-gear icon-color" onclick='window.location.href="#/updatepassword"' title="${message(code: 'default.password.update', default: 'Update password')}">
<g:message code="default.password.update" default="Update Password"/>
</a>
</li>
</ul>
</li>
<li class="controller">
<a data-ng-controller='UserCtrl' data-ng-click='logout()' title="${message(code: 'security.signoff.label', default: 'Log out')}">
<span class="glyphicon glyphicon-log-out"></span> <g:message code="security.signoff.label" default="Sign Off"/>
</a>
</li>
</ul>
</div>
</div>
</nav>

OK I finally figured this out. Turns out that doubletaptogo.js only works when the nav is at the top of the page and there is no way around this; if the nav is below any other content such as header etc forget about using this script as it will always cause the nav to jump to the top of the page.
I have opted for an alternative drop down that simply uses html and css, no js or jquery needed for this.
See http://goligraphist.com.au/development/ for the update.
That's the end of a major headache.

You can call void(0) for the link like below :
Clickc heere 1
or use e.preventDefault();
$('a[href="#"]').click(function(e){
e.preventDefault();
});
JSFiddle Demo

I think the right way is to write the full URL before the hash (#)
PHP:
<?php
$currentPage = 'http' . ($_SERVER["HTTPS"] && $_SERVER["HTTPS"] != 'off' ? 's' : '') . '://';
$currentPage .= $_SERVER["HTTP_HOST"] . htmlentities($_SERVER["REQUEST_URI"], ENT_QUOTES);
?>
<a href="<?php echo $currentPage; ?>#nav" title="show menu" class="menu-button">
<a href="<?php echo $currentPage; ?>#" title="hide menu" class="menu-button">
Smarty:
..
..

How to prevent bootstrap dropdown submenu click closing the parent dropdown

I have a dropdown that contains a div which contains a dropdown of its own. As soon as I click the inner dropdown, the parent dropdown closes. How to prevent the parent dropdown from closing ? And how to solve the same problem for multiple nested dropdowns ?
Code:
<div class="dropdown selectDropdownDiv">
<a data-toggle="dropdown" href="#" class="btn selectDropdown">--<span class="caret pull-right"></span></a>
<div class="dropdown-menu keep_open" role="menu" aria-labelledby="dLabel" id="keywordDropdown">
<div class="dropdown selectDropdownDiv">
<a data-toggle="dropdown" href="#" class="btn selectDropdown">--<span class="caret pull-right"></span></a>
<ul class="dropdown-menu keep_open" role="menu" aria-labelledby="dLabel">
<li class="checkbox marginl5">
<label>
<span class="checkLabel">Source X</span><input type="checkbox">
</label>
</li>
<li class="checkbox marginl5">
<label>
<span class="checkLabel">Source X</span><input type="checkbox">
</label>
</li>
</ul>
</div>
</div>
</div>
I am using Twitter Bootstrap. Any help would be appreciated.

This should work. It stop the propagation of the click event to the bootstrap event that controls hiding the menu.
$("#parent-element").on("click", ".dropdown-menu", function (e) {
$(this).parent().is(".open") && e.stopPropagation();
});