Keep Bootstrap dropdown open on click
Try removing the propagation on the button itself like so:
$('.dropdown-menu a.removefromcart').click(function(e) {
e.stopPropagation();
});
EditHere 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><a href="#">Total: € 43,00</a></li>
<li><a href="/checkout">Checkout</a></li>
</ul>
</li>
</ul>
Keep Bootstrap Dropdown Open When Clicked Off
From the events section of the Bootstrap dropdown
documentation:
For starters, to prevent the dropdown from closing, we can just listen to this event and stop it from proceeding by returning
hide.bs.dropdown
: This event is fired immediately when the hide instance method has been called.
false
:$('#myDropdown').on('hide.bs.dropdown', function () {
return false;
});
For a complete solution, you probably want to allow it to close when the dropdown itself is clicked. So only some of the time we'll want to prevent the box from closing.
To do this we'll set .data()
flags in two more events raised by the dropdown:
shown.bs.dropdown
- When shown, we'll set.data('closable')
tofalse
click
- When clicked, we'll set.data('closable')
totrue
hide.bs.dropdown
event was raised by a click
on the dropdown, we'll allow a close.Live Demo in jsFiddle
JavaScript$('.dropdown.keep-open').on({
"shown.bs.dropdown": function() { this.closable = false; },
"click": function() { this.closable = true; },
"hide.bs.dropdown": function() { return this.closable; }
});
HTML (note I've added the class keep-open
to the dropdown)<div class="dropdown keep-open">
<!-- Dropdown Button -->
<button id="dLabel" role="button" href="#" class="btn btn-primary"
data-toggle="dropdown" data-target="#" >
Dropdown <span class="caret"></span>
</button>
<!-- Dropdown Menu -->
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
Keep Bootstrap Dropdown Open When Clicked Inside
You can use the following JavaScript to manually open and close the dropdown menu:
$(function() {
$('.dropdown-toggle').on('click', function(event) {
$('.dropdown-menu').slideToggle();
event.stopPropagation();
});
$('.dropdown-menu').on('click', function(event) {
event.stopPropagation();
});
$(window).on('click', function() {
$('.dropdown-menu').slideUp();
});
});
Demo in StackSnippets
$(function() {
$('.dropdown-toggle').on('click', function(event) { $('.dropdown-menu').slideToggle(); event.stopPropagation(); });
$('.dropdown-menu').on('click', function(event) { event.stopPropagation(); });
$(window).on('click', function() { $('.dropdown-menu').slideUp(); });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div id="navbar"> <nav class="navbar navbar-default navbar-static-top" role="navigation"> <ul class="nav navbar-nav"> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">MENU</a> <div class="dropdown-menu"> <p>Hello</p> <input type="text"> </div> </li> </ul> </nav></div>
Avoid dropdown menu close on click inside
Removing the data attribute data-toggle="dropdown"
and implementing the open/close of the dropdown can be a solution.
First by handling the click on the link to open/close the dropdown like this :
$('li.dropdown.mega-dropdown a').on('click', function (event) {
$(this).parent().toggleClass('open');
});
and then listening the clicks outside of the dropdown to close it like this :$('body').on('click', function (e) {
if (!$('li.dropdown.mega-dropdown').is(e.target)
&& $('li.dropdown.mega-dropdown').has(e.target).length === 0
&& $('.open').has(e.target).length === 0
) {
$('li.dropdown.mega-dropdown').removeClass('open');
}
});
Here is the demo :http://jsfiddle.net/RomaLefrancois/hh81rhcm/2/
bootstrap 4 dropdown menu outside close
Simply you can add an onclick: event.stopPropagation()
event on the .dropdown-menu
to achieve what you want <div class="dropdown-menu" onclick="event.stopPropagation()">
P.S: to use jQuery you can use $
instead of jQuery
. If you cannot use it, you may have jQuery noConflict mode enabled somewhere in your code, see jQuery noConflict
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu" onclick="event.stopPropagation()">
<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>
Avoid dropdown close on clicking outside
Bootstrap 4 Dropdown eventing is slightly different than Bootstrap 3, therefore the suggested duplicates (and here) will not work to prevent the dropdown from closing on an outside click.
For Bootstrap 4, look for the clickEvent
, and when found in the hide
event, prevent the default close behavior. This dropdown will only close when the button is clicked.
$('#myDD').on('hide.bs.dropdown', function (e) {
if (e.clickEvent) {
e.preventDefault();
}
})
DemoIn some cases, you may want the Dropdown to close when the button or menu is clicked. In this case you can examine the clickEvent target. For example, look for the 'nav-link' class.
$('#myDD').on('hide.bs.dropdown', function (e) {
if (e.clickEvent && e.clickEvent.target.className!="nav-link") {
e.preventDefault();
}
});
Demo 2 Keep-bootstrap-3-dropdown-open-when-clicked
Updated fiddle
You need to make just one change:
Instead of listening to hide.bs.dropdown
event for only .dropdown.active
apply the event handler to .dropdown
.
Basically, change:
$(".dropdown.active").on("hide.bs.dropdown",function(e) {
to:
$(".dropdown").on("hide.bs.dropdown",function(e) {
EDIT:
In order to override the default dropdown behavior, you'll need to ignore the
active
state since more than one li
element can remain expanded and you'll need to toggle visibility yourself.Here's the updated demo
Code:
$(function(){
// Handle show/hide toggle yourself
$(".dropdown").on("click",function(e) {
if($(e.currentTarget).hasClass("open"))
$(e.currentTarget).toggleClass("open",false);
else
$(e.currentTarget).toggleClass("open",true);
e.preventDefault();
return false;
});
// suppressing default bahavior
$(".dropdown").on("hide.bs.dropdown", doNothing);
$(".dropdown").on("show.bs.dropdown", doNothing);
function doNothing(e) {
e.preventDefault();
return false;
}
});
Prevent dropdown from closing if click is happening inside the dropdown menu
I updated your HTML file (see below) so that the event.stopPropagation() method is called directly once the user clicks on the dropdown. Seems to be working, I found the answer here: How to prevent an angular-bootstrap dropdown from closing (Unbind Event which was bound by a directive)
The openDropdown() method can be removed from the ts file. Hope this helps!
<div class="container"> <div> <div class="btn-group" dropdown> <div dropdownToggle id="pencilColorPicker"> <img class="icon" src="https://www.burns-360.com/wp-content/uploads/2018/09/Sample-Icon.png"> </div>
<ul id="dropdown-basic" *dropdownMenu class="dropdown-menu" (click)="$event.stopPropagation()" role="menu" aria-labelledby="button-basic"> <li role="menuitem"><a class="dropdown-item" href="#">Action</a></li> <li role="menuitem"><a class="dropdown-item" href="#">Another action</a></li> </ul> </div> </div>
<div> <div class="btn-group" dropdown> <div dropdownToggle id="pencilColorPicker"> <img class="icon" src="https://www.burns-360.com/wp-content/uploads/2018/09/Sample-Icon.png"> </div>
<ul id="dropdown-basic" *dropdownMenu class="dropdown-menu" (click)="$event.stopPropagation()" role="menu" aria-labelledby="button-basic"> <li role="menuitem"><a class="dropdown-item" href="#">Action</a></li> <li role="menuitem"><a class="dropdown-item" href="#">Another action</a></li> </ul> </div> </div>
</div>
BootStrap3 keep the dropdown menu open after click on the item
Here is one way to keep the dropdown open after click...
$('#myDropdown').on('hide.bs.dropdown', function () {
return false;
});
Demo: http://www.bootply.com/116350Another option is to handle the click event like this..
$('#myDropdown .dropdown-menu').on({
"click":function(e){
e.stopPropagation();
}
});
Demo: http://www.bootply.com/116581
Related Topics
Use of @ Symbol in Node Module Names
How to Trigger Click on Page Load
How to Parseint a String with Leading 0
In JavaScript, Can You Extend the Dom
Use of @ Symbol in Node Module Names
JavaScript Switch VS. If...Else If...Else
Get Width Height of Remote Image from Url
JavaScript - Generating All Combinations of Elements in a Single Array (In Pairs)
Why Threre Is No Way to Download File Using Ajax Request
Razor MVC Populating JavaScript Array with Model Array
Adding Csrftoken to Ajax Request
Sampling a Random Subset from an Array
Read/Write Bytes of Float in Js
Nodejs Timeout a Promise If Failed to Complete in Time
Rotate Object on Specific Axis Anywhere in Three.Js - Including Outside of Mesh
How to Know When All Promises Are Resolved in a Dynamic "Iterable" Parameter