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);
});
Related
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');
});
});
I have the following HTML item (menubox):
<div class="uiContextualLayerPositioner uiLayer" data-testid="undefined" data-ownerid="u_0_10" style="width: 473px; left: 288px; top: 290px;">
<div class="uiContextualLayer _5v-0 _53il uiContextualLayerBelowLeft">
<div class="_54nq _57di _558b _2n_z" id="u_0_y">
<div class="_54ng">
<ul class="_54nf" role="menu">
<li class="_54ni _5ipo __MenuItem" role="presentation">
<a class="_54nc _54nu" href="#" role="menuitemcheckbox">
<span>
<i class="mrs img sp_Kw8-3yVLtZo sx_864bd8"></i>
<span class="_54nh">Item1</span>
</span>
</a>
</li>
<li class="_54ni _5ipo _54nd __MenuItem" role="presentation">
<a class="_54nc _54nu" href="#" data-testid="notif_setting_higlights" role="menuitemcheckbox" aria-checked="true">
<span>
<i class="mrs img sp_Kw8-3yVLtZo sx_864bd8">
</i>
<span class="_54nh">Item2</span>
</span>
</a>
</li>
<li class="_54ni _5ipo __MenuItem" role="presentation">
<a class="_54nc _54nu" href="#" role="menuitemcheckbox">
<span>
<i class="mrs img sp_Kw8-3yVLtZo sx_864bd8"></i>
<span class="_54nh">Item3</span>
</span>
</a>
</li>
<li class="_54ni _5ipo __MenuItem" role="presentation">
<a class="_54nc _54nu" href="#" role="menuitemcheckbox">
<span>
<i class="mrs img sp_ey5BbZl6hUH sx_780712">
</i>
<span class="_54nh">Item4</span>
</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
and i can see that Item1 is deselected, and Item2 is selected with:
aria-checked="true"
and i want to deselect Item2 and select Item1. For this purpose take objectID from Item1 that says it's selected
_54nc _54nu
and call
document.getElementById("_54nc _54nu").setAttribute("aria-checked", true)', 'about: blank', 0)
but nothin happens. What did i missed?
P.S. I see that all object-ID's of class are same, but i also tried other id's. Maybe I misunderstood the issue of id for the class, and maybe the way it is different. Please give me directions. :)
document.getElementById() is incorrect since none of your element has any id.
You want to use document.getElementsByClassName()
Menu - Snippet
<ul class="Menu Open">
<li>
<a href="javascript:;" data-title="Account">
<span class="Title">Account</span>
</a>
<ul class="sub-menu First TeStInG">
<li>
<a href="javascript:;" data-title="Account/Dashboard">
<span class="Title">Dashboard</span>
</a>
</li>
<li>
<a href="javascript:;" data-title="Account/Messages">
<span class="Title">Messages</span>
</a>
<ul>
<li>
<a href="javascript:;" data-title="Account/Messages/Compose">
<span class="Title">Compose</span>
</a>
</li>
</ul>
</li>
<li>
<a href="javascript:;" data-title="Account/Profile">
<span class="Title">Profile</span>
</a>
<ul>
<li>
<a href="javascript:;" data-title="Account/Profile/View">
<span class="Title">View</span>
</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
JQuery - Snippet
$(document).ready(function() {
"use strict";
$(document).on('click', function(e) {
if ($(e.target).closest($('.Menu')).length) {
if ($(e.target).closest("a").siblings("ul").length === 0) {
console.log('Doesn\'t have Children');
} else {
$(e.target).closest("a").siblings("ul").show();
}
}
});
});
What I'm Trying To Achieve
Without using jQuery UI, I would like to make it so that only one menu item is visible at a time on each level.
If the user has expanded a level multiple times then clicks on a different higher level, all within should be hidden.
If the user clicks on a same level item which expands, all other same level should be hidden.
I've tried several ways to do this, however I keep getting tied up whereas I either make things hide which shouldn't or make it so that I cannot expand anything. I've done this previously and cannot understand why I cannot do this now.
You can use find() but when you click on parent you will have to check if it is parent, so when you want to open you just want to open direct children but when you want to close you want to close all chidren.
$("ul li ul").hide()
$('li').click(function(e) {
e.stopPropagation()
var parent = $(this)
$(this).find('ul').each(function() {
if ($(this).is(':visible')) {
$(this).hide()
} else {
if ($(this).parent().is(parent)) {
$(this).show()
}
}
})
$(this).siblings().children('ul').hide()
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="Menu Open">
<li>
<a href="javascript:;" data-title="Account">
<span class="Title">Account</span>
</a>
<ul class="sub-menu First TeStInG">
<li>
<a href="javascript:;" data-title="Account/Dashboard">
<span class="Title">Dashboard</span>
</a>
</li>
<li>
<a href="javascript:;" data-title="Account/Messages">
<span class="Title">Messages</span>
</a>
<ul>
<li>
<a href="javascript:;" data-title="Account/Messages/Compose">
<span class="Title">Compose</span>
</a>
</li>
</ul>
</li>
<li>
<a href="javascript:;" data-title="Account/Profile">
<span class="Title">Profile</span>
</a>
<ul>
<li>
<a href="javascript:;" data-title="Account/Profile/View">
<span class="Title">View</span>
</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<li class="nav-parent">
<a><i class="fa fa-list-alt" aria-hidden="true</i><span>Forms</span>
</a>
<ul class="nav nav-children" id="dd">
<li>
<a href="{:url('edit/Form/getone')}"><span class="text"> Editors</span>
</a>
</li>
<li>
<a href="{:url('edit/Form/getone')}"><span class="text"> Editors</span>
</a>
</li>
</ul>
</li>
Hi, as you can see i have a nav bar section, i am using click function, but when i click, it alerts twice. does anyone know why? thanks li
$('li.nav-parent ul li a').click(function(){
alert(1);
});
I Guess there is a issue in your HTML Construct near
<li class="nav-parent">
<a><i class="fa fa-list-alt" aria-hidden="true</i><span>Forms</span>
</a>
In above code
<i class="fa fa-list-alt" aria-hidden="true</i> is not properly closed.
Try Below one
$(function(){
$('li.nav-parent ul li a').click(function(e) {
e.preventDefault();
alert(1);
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="nav-parent">
<a>
<i class="fa fa-list-alt" aria-hidden="true"></i>
<span>Forms</span>
</a>
<ul class="nav nav-children" id="dd">
<li>
<a href="{:url('edit/Form/getone')}">
<span class="text"> Editors</span>
</a>
</li>
<li>
<a href="{:url('edit/Form/getone')}">
<span class="text"> Editors</span>
</a>
</li>
</ul>
</li>
error in your code:<a><i class="fa fa-list-alt" aria-hidden="true</i><span>Forms</span> missing " before </i>
after fix, alerts only once.
https://jsfiddle.net/u4s7wmhg/1/
thank you guys. but it is not because of that. :( the reason i just found out is because I loaded this click function twice somehow in somewhere. But thank your effort.
as pointed out by other user you have misplaced > in your code.
Also
what you are trying to select in your jquery which has two matches (event propagation due to unclosed braces ) ie $('li.nav-parent ul li a') has matches for each li and that's causing the event to fire twice for each li > a element click.
Here is my drop down in HTML
<li class="dropdown profile-dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<span class="hidden-xs">Login</span> <b class="caret"></b>
</a>
<span class="dropdown-menu dropdown-menu-right" id='topArea'>
<span id='LoginArea'>Login</span>
<span id='RegisterArea'>Register</span>
<br>
<span id='login'>This is Login Area</span>
<span id='register' style='display:none'>This is Register Area</span>
</span>
</li>
Here is my Jquery to Show and Hide Login and Register Area
$("#showLoginArea").click(function(){
console.log('login');
$("#login").show();
$("#register").hide();
});
$("#showRegisterArea").click(function(){
console.log('register');
$("#login").hide();
$("#register").show();
});
But Clicking the showRegisterArea Span the Entire Menu is getting hide as i used data-toggle="dropdown".
How can i fix this
Note :
While i click the register the register area is shown but the popup hides, and while click the pop again , the register area is being shown.
How can i avoid or override it.
Here's a revised, simplified fiddle: https://jsfiddle.net/cu3gdgb3/1/
HTML:
<li class="dropdown profile-dropdown">
<span class="dropdown-menu dropdown-menu-right" id='topArea'>
<span id='showLoginArea'>Login</span>
<span id='showRegisterArea'>Register</span>
<br>
<span id='loginArea'>This is Login Area</span>
<span id='registerArea'>This is Register Area</span>
</span>
</li>
jQuery:
$("#loginArea").hide();
$("#registerArea").hide();
$("#showLoginArea").click(function(){
console.log('login');
$("#loginArea").toggle();
$("#registerArea").hide();
});
$("#showRegisterArea").click(function(){
console.log('register');
$("#loginArea").hide();
$("#registerArea").toggle();
});
You were incorrectly referencing the <div>'s you wanted to toggle.
EDIT - further to OP's request for login / register areas to hide when any other area of the page is click, see updated fiddle: https://jsfiddle.net/cu3gdgb3/2/
jQuery:
$(document).on('click', function (e) {
if ($(e.target).closest("#topArea").length === 0) {
$("#loginArea").hide();
$("#registerArea").hide();
}
});
As mention is comment by #Antonio there was no loginArea area fix this here.
$("#showLoginArea").click(function(){
console.log('login');
$("#loginArea").show();
$("#registerArea").hide();
});
$("#showRegisterArea").click(function(){
console.log('register');
$("#loginArea").hide();
$("#registerArea").show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="dropdown profile-dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<span class="hidden-xs">Login</span> <b class="caret"></b>
</a>
<span class="dropdown-menu dropdown-menu-right" id='topArea'>
<span id='showLoginArea'>Login</span>
<span id='showRegisterArea'>Register</span>
<br>
<span id='loginArea'>This is Login Area</span>
<span id='registerArea' style='display:none'>This is Register Area</span>
</span>
</li>
You need to pass the event in to the function and stop the propagation or bubbling of the click event so the login dialog doesn't close. Also the naming of the loginArea needs to be changed.
<script>
$("#showLoginArea").click(function(event){
event.stopPropagation();
$("#loginArea").show();
$("#registerArea").hide();
});
$("#showRegisterArea").click(function(event){
event.stopPropagation();
$("#loginArea").hide();
$("#registerArea").show();
});</script>
<li class="dropdown profile-dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<span class="hidden-xs">Login</span> <b class="caret"></b>
</a>
<span class="dropdown-menu dropdown-menu-right" id='topArea'>
<span id='showLoginArea'>Login</span>
<span id='showRegisterArea'>Register</span>
<br>
<span id='loginArea'>This is Login Area</span>
<span id='registerArea' style='display:none'>This is Register Area</span>
</span>
</li>
Your second loginarea was incorrectly named