I have a twitter bootstrap dropdown inside a div with the plugin jOrgChart.
The problem I'm having is that when I click the button to open the dropdown menu it also triggers a click event in the parent div that does a collapse of other elements.
This is my html:
<div id="chart">
<div class="node">
<div class="btn-group">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
Actions
<span class="caret"></span>
</a>
<ul class="dropdown-menu" style="text-align:left;">
<li>Edit</li>
<li>Delete</li>
</ul>
</div>
</div>
<div class="node">
...
</div>
I want to prevent the click of a.dropdown-toggle from bubbling to div.node, I tried with this:
$("div#chart div.btn-group > a.dropdown-toggle").click(function (e) {
e.stopPropagation();
});
But now the dropdown isn't working.
EDIT
This is the concrete case: http://jsfiddle.net/UTYma/2/ (Thanks to Joe Tuskan for starting the fiddle)
$("#orgchart").jOrgChart({ chartElement: '#chart' });
$("div#chart div.btn-group > a.dropdown-toggle, .dropdown-menu li a").click(function(e) {
e.stopPropagation();
$('.dropdown-menu').toggle();
});
Stop Propagation then toggle. Example
I had to add the drop down menu items to the click handler to keep the behavior constant.
Try something like this:
$("div#chart div.btn-group > a.dropdown-toggle").click(function (e) {
e.isDropDownToggleEvent =true;
})
Then:
$("div.node").click(function (e) {
if (e.isDropDownToggleEvent != null && e.isDropDownToggleEvent)
return false;
return true;
})
You can also try to put e.preventDefault() or e.stopPropagation(); instead of return false.
I used
$('.multiselect').on('click', function (e) {
$(this).next('.dropdown-menu').toggle();
e.stopPropagation();
});
This is similar to #Joe's answer, but a bit more generic
$("div#chart div.btn-group > a.dropdown-toggle, .dropdown-menu li a").click(function(e) {
e.stopPropagation();
$(this).closest('.dropdown').toggleClass('open');
});
You should use this instead as above solution doesn't close the dropdown on focus out.
Building on Joe's answer, this includes the normal dropdown functionality of closing on the next click.
$("#orgchart").jOrgChart({ chartElement: '#chart' });
$("div#chart div.btn-group > a.dropdown-toggle, .dropdown-menu li a").click((e) => {
e.stopPropagation();
$('.dropdown-menu').toggle();
// close on next click only
$(window).one("click", () => $('.dropdown-menu').toggle());
});
If I understand correctly, you want to avoid closing menu.
$("div#chart .dropdown-menu li").bind('click',function (e) {
e.stopPropagation();
},false);
Related
I am working on a click event at the front.
Click Tuesday and Thursday to activate the click function.
But I want to make it work only when I click two or four.
Please refer to the code below.
<li class="swiper">
<span style="" class="Day">
화<em date="2022-08-02" class="on">2</em>
</span>
</li>
<li class="swiper">
<span style="" class="Day">
목<em date="2022-08-04">4</em>
</span>
</li>
js click code (i try)
$("li > span > em").click(function () {
$("li > span > em").removeClass("on");
$(this).addClass("on");
})
What should I do?
Try this
$(document).on('click', '.Day', function(){})
I think i have a solution for you ! it's the stopPropagation() method. it prevents propagation of the same event from being called.
Propagation means bubbling up to parent elements or capturing down to child elements.
Try this out :
$(" li > span > em").click(function (e) {
alert('em CLICKED');
e.stopPropagation();
});
$("li > span").click(function (e) {
alert('span CLICKED');
$("li > span > em").removeClass("on");
$(this).addClass("on");
});
Your code is working. You can check by adding alert or console.log inside the click callback function.
$("li > span > em").click(function () {
alert('hello');
$("li > span > em").removeClass("on");
$(this).addClass("on");
})
I have a bootstrap dropdown menu:
<div class="dropdown>
<a class="dropdown-toggle" href="#" id="menu1" data-toggle="dropdown"><img src="#imagePath" class="img-circle dropbtn" alt="Product" style="width:30px;height:30px;" /></a>
<ul class="dropdown-menu" id="productDD" role="menu" aria-labelledby="menu1"></ul>
</div>
Now the ul load the products on page load through ajax call. The issue is when I click any product in the dropdown, the dropdown gets closed. But I want to close dropdown only when mouse is clicked anywhere outside of the ul
Try something like this:
$(document).click(function(e) {
// get the clicked element
$clicked = $(e.currentTarget);
// if the clicked element is not a descendent of the dropdown
if ($clicked.closest('.dropdown').length === 0) {
// close the dropdown
$('.dropdown').removeClass('open');
}
});
In 2021 you do it this way:
$('.dropdown').on({
"shown.bs.dropdown": function() { /* whatever you want to do when it fires */ },
"click": function(e) { // handles click event
console.log(e.target) // just to check which element is on top
if($('.dropdown-menu').is(e.target)) { // if dropdown is clicked
this.closable = false // do not close it
return;
} else {
this.closable=true; // else close it
}
},
"hide.bs.dropdown": function() { return this.closable; } // save state
});
}
Bootstrap has a built-in solution
<a class="dropdown-toggle" href="#" id="menu1" data-toggle="dropdown" data-bs-auto-close="outside"><img ... /></a>
just place this script in your code
<script>
$(document).click(function() {
$(".dropdown").removeClass('open');
});
</script>
I know there are hundreds of topics regarding this, however none of them seemed to work for me. I want for the dropdown to hide when the mouse leaves the element with jQuery, this is what I currently get:
CodePen example.
jquery:
$(document).ready(function() {
$('.expand').click(function(e) {
e.preventDefault();
$('section').slideUp('normal');
if ($(this).next().is(':hidden') === true) {
$(this).addClass('on');
$(this).next().slideDown('normal');
}
});
$('section').hide();
});
$('section').mouseleave(function(){
$(this).hide();
});
I've also tried the following:
$('section').hide();
$('.section').on('mouseout',function(){
$(this).hide();
})
Yet, nothing really seems to work correctly and gives me the same result. How can I fix this?
Working example.
You should use setTimeout()/clearTimeout() functions to solve your problem so you've to attach mouseleave event to the button with class dropbtn and both mouseleave/mouseleave events (using hover()) to the div dropdown-content so when the mouse leave the button to any other element you should check if the mouseenter is inside the dropdown, if yes clear the timeout the hide_dropdown so it will not hide the div, else your time out will hide the dropdown after 50ms :
var hide_dropdown;
$('.dropbtn').mouseleave(function(e){
var _this = $(this);
hide_dropdown = setTimeout(function(){
_this.next('.dropdown-content').removeClass('show');
},50);
});
$('.dropdown-content').hover(
function(){
clearTimeout(hide_dropdown);
},
function(){
$(this).removeClass('show');
}
);
Hope this helps.
you code it's confusing so i made a simple example for what you want.
see here snippet >
$(".dropbtn").click(function(){
var showMe = $(this).siblings(".drop-menu"),
visibleDrop = $(this).parent("li").siblings("li").find(".drop-menu").filter(":visible")
$(showMe).slideDown()
$(visibleDrop).slideUp()
$(showMe).mouseleave(function(){
$(this).slideUp()
})
})
ul { list-style:none;margin:0;padding:0}
ul li { display:inline-block;width:20%;position:Relative}
ul ul li { display:block;}
ul ul { display:none;position:absolute;top:100%;left:0;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li><a class="dropbtn"> Has Children1</a>
<ul class="drop-menu">
<li>SubItem1</li>
<li>SubItem2</li>
<li>SubItem3</li>
</ul>
</li>
<li><a class="dropbtn"> Has Children2</a>
<ul class="drop-menu">
<li>SubItem1</li>
<li>SubItem2</li>
<li>SubItem3</li>
</ul>
</li>
<li><a>No children</a></li>
<li><a> No children</a></li>
</ul>
or fiddle > jsFiddle
let me know if it helps
<div>
Menu
</div>
<div id="menudiv" style="position: fixed; background-color: white; display: none;">
Page 1<br />
Page 2<br />
Page 3<br />
</div>
link:-http://jsfiddle.net/5SSDz/
In your codepen example, I have added the following code snippet inside ready callback which seems to work.
$('.expand').on("mouseleave", function(e){
e.preventDefault();
$('section').slideUp('normal');
});
Here is the complete js code
$(document).ready(function() {
$('.dropbtn').on("mouseleave", function(e){
$(".dropdown-content").removeClass("show");
});
$('.expand').on("click", function(e) {
e.preventDefault();
$('section').slideUp('normal');
if ($(this).next().is(':hidden') === true) {
$(this).addClass('on');
$(this).next().slideDown('normal');
}
});
$('section').hide();
});
I have 3 or so button in my page which i need to show a social icon when user clicks on those links.
I used this jQuery
$('.one').on('click', function() {
$('.smenu').not($(this).next()).removeClass('share')
$(this).next().toggleClass('share');
});
<div id="sharing_area">
<ul class='smenu'>
<li class="facebook"><a target="_blank" onclick="return windowpop(this.href, 545, 433)" href="https://www.facebook.com/sharer/sharer.php?u=http://youtu.be/<? echo $id_3 ?>"><i class="icon-facebook"></i></a></li>
</ul>
<span class="one">Share</span>
</div>
I keep getting error, but i don't know what i'm doing wrong.
Can you guys help me out?
Here is my DEMO
There is no .next() element for the span you are clicking! Your UL is before the span, so you need prev():
http://jsfiddle.net/TrueBlueAussie/5dsrk470/5/
$('.one').on('click', function() {
console.log('click');
$('.smenu').not($(this).prev()).removeClass('share')
$(this).prev().toggleClass('share');
});
If you want to remove the class on clicking the links add this delegated event handler:
$(document).on('click', 'a', function(){
$('.smenu').removeClass('share')
});
Looks like you confused prev and next methods:
var $smenu = $('.smenu');
$('.one').on('click', function () {
$smenu.removeClass('share');
$(this).prev().toggleClass('share');
});
Demo: http://jsfiddle.net/5dsrk470/6/
I've got a simple dropdown script and I want it to hide all open dropdowns on a click outside of the menu. But it does not seem to work, does anyone know why?
You can find it here: http://codepen.io/dr-potato/pen/rLleC?editors=101
HTML
<ul>
<li>Home</li>
<li class="Navigation-listItem is-dropdown">
About
<ul class="Navigation-list is-dropdown is-hidden">
<li>Johnny</li>
<li>Julie</li>
<li>Jamie</li>
</ul>
</li>
<li class="Navigation-listItem is-dropdown">
Contact
<ul class="Navigation-list is-dropdown is-hidden">
<li>Johnny</li>
<li>Julie</li>
<li>Jamie</li>
</ul>
</li>
</ul>
CSS
.Navigation-list {
display: block;
}
.Navigation-list.is-hidden {
display: none;
}
JS
$(document).ready(function() {
$('.Navigation-listItem').click(function() {
$(this).children('.Navigation-list.is-dropdown').toggleClass('is-hidden');
});
});
/* Anything that gets to the document
will hide the dropdown */
$(document).click(function(){
$(".Navigation-listItem.is-dropdown").addClass('is-hidden');
});
/* Clicks within the dropdown won't make
it past the dropdown itself */
$(".Navigation-listItem.is-dropdown").click(function(e){
e.stopPropagation();
});
Working Fiddle
jQuery Code
$(document).ready(function () {
$('.Navigation-listItem').click(function () {
$(this).children('.Navigation-list.is-dropdown').toggleClass('is-hidden');
});
/* Anything that gets to the document
will hide the dropdown */
$(document).on('click', function (event) {
if ($(event.target).closest('#menu').length == false) {
$(".Navigation-list.is-dropdown").addClass('is-hidden');
}
});
/* Clicks within the dropdown won't make
it past the dropdown itself */
$(".Navigation-listItem.is-dropdown ").click(function (e) {
e.stopPropagation();
});
});
With help from this answer
You can change the display property of your dropdown in this manner. This is just a rough code.
if(dropDownShow.css('display') != 'block'){
dropDownShow.css('display', 'block');
dropDownShow.css('position', 'absolute');
}
else{
dropDownShow.css('display', 'none');
}
With the info you gave and the codepen I can't see it working, but I suppose that $(document).click(function() to hide won't work because the drop down is inside the document so when you click it, it'll disappear. I recommend you to see this post How to hide/show drop down list content in HTML.