Develop Reference

Prevent Bootstrap dropdown from closing on clicks [duplicate]

This question already has answers here:
How do I prevent my dropdown from closing when clicking inside it?
(3 answers)
Closed 4 years ago.
My menu uses Bootstrap 3 and I can't prevent dropdown from closing on click. How can I do it?
JSFiddle
// Add open class if active
$('.sidebar-nav').find('li.dropdown.active').addClass('open');
// Open submenu if active
$('.sidebar-nav').find('li.dropdown.open ul').css("display","block");
// Change active menu
$(".sidebar-nav > li").click(function(){
$(".sidebar-nav > li").removeClass("active");
$(this).addClass("active");
});
// Add open animation
$('.dropdown').on('show.bs.dropdown', function(e){
$(this).find('.dropdown-menu').first().stop(true, true).slideDown();
});
// Add close animation
$('.dropdown').on('hide.bs.dropdown', function(e){
$(this).find('.dropdown-menu').first().stop(true, true).slideUp();
});

You need to stop event from bubbling up the DOM tree:
$('.dropdown-menu').click(function(e) {
e.stopPropagation();
});
event.stopPropagation prevents event from reaching the node where it's eventually handled by Bootstrap hiding menu.
Demo: http://jsfiddle.net/wkc5md23/3/

I believe this should be a more proper solution, as stopping propagation on the click event might sometimes cause issues later on in development. You may read more into it here: http://css-tricks.com/dangers-stopping-event-propagation/ Instead this solution stops propagation on the Bootstrap hide (hide.bs.dropdown) event, which stops it from continuing on to the hidden (hidden.bs.dropdown) event.
The following code has been taken and edited by myself to make it work on all Bootstrap dropdowns, as it has originally been taken from here: Preventing bootstrap dropdown from closing on click I personally prefer this way also because it uses the built in Bootstrap dropdown events, which could be found here: https://getbootstrap.com/docs/3.4/javascript/#dropdowns-events.
$(function () {
$('.dropdown').on({
'click': function (event) {
if ($(event.target).closest('.dropdown-toggle').length) {
$(this).data('closable', true);
} else {
$(this).data('closable', false);
}
},
'hide.bs.dropdown': function (event) {
hide = $(this).data('closable');
$(this).data('closable', true);
return hide;
}
});
});

You can disable the dropdown functionality temporarily. This is a workaround.
Example with input field inside the drop-down "menu":
//for dropdown field not closing when clicking on inputfield
$(document).on('focus', 'input', function (e) {
// this attribute can be anything except "dropdown", you can leave it blank
$('#yourDropdownID').attr('data-toggle', 'off');
});
//for dropdown field back to normal when not on inputfield
$(document).on('focusout', 'input', function (e) {
$('#yourDropdownID').attr('data-toggle', 'dropdown');
});
This can be used on anything that is clickable and you can define individually what items clicked can close or not close the drop-down menu.

Not close in click out side menu
$(function() {
var closeble = false;
$('body').on('click', function (e) {
if (!$(event.target).is('a.dropdown-toggle')) {
closeble = false;
}
});
$('.dropdown').on({
'click': function (event) {
if ($(event.target).closest('.dropdown-toggle').length) {
closeble = true;
} else {
closeble = false;
}
},
'hide.bs.dropdown': function () {
return closeble;
}
});
});

jquery menu bar fadein fadeout error

so after some questioning i wrote a jsfiddle page to show you what im tried. When going over the link the div shows up but when the mouse goes over it it fadesout and again fadesin. Isnt posible that when going above the div it just stays there until you move the mouse away?
the example on jsfiddle works when you go above the menubar Crepes..
here´s my jquery code.. the css and html are on jsfiddle
thanks for the help!
http://jsfiddle.net/DFxB7/
<script type="text/javascript">
$("#crep, #front").hover(function (e) {
e.preventDefault();
$("#front").fadeIn();
},
function(){
$("#front").fadeOut();
});
</script>

add the event .stop() like this:
$("#crep, #front").hover(function (e) {
e.preventDefault();
$("#front").stop().fadeIn();
},
function(){
$("#front").stop().fadeOut();
});
DEMO

I believe this may give you the functionality you're after...
var toggle = 0;
$("#crep, #front").hover(function (e) {
if(toggle == 0)
{
toggle = 1;
$("#front").stop().fadeIn();
}else{
toggle = 0;
$("#front").stop().fadeOut();
}
});

jQuery - Close Dialog When Clicked Outside

Every-time a user clicks on Register or Login link, a popup window appears to proceed. But the user is supposed to click the Login or register link again if he wants to close the popup window. Is it possible to close the popup window if click is made anywhere else on the webpage?
This is the code for Dropdown menu on my webpage:
<!---dropdown--->
<script type="text/javascript">
//<![CDATA[
function showlogin(){
$("#loginbox").animate({"height": "toggle"}, { duration: 800 });
$("#regsiterbox").hide();
$(".login a").css("color", "#bf1e1a");
$(".create-account a").css("color", "#747474");
}
function showregister(){
$("#regsiterbox").animate({"height": "toggle"}, { duration: 800 });
$("#loginbox").hide();
$(".create-account a").css("color", "#bf1e1a");
$(".login a").css("color", "#747474");
}
//]]>
</script>
<!---dropdown--->
Any help would be appreciated !

Add a class .modal to every popup box you have on the page and add the following. It will hide any popup box with a class .modal when clicked.
$('body').on('click',function(){
if(!$(this).hasClass('modal')){
$(".modal").hide();
}
});

try this
$('body').on('click',function(){
if($("#regsiterbox").css('display') != "none"){
$("#regsiterbox").hide();
}
else if($("#loginbox").css('display') != "none"){
$("#loginbox").hide();
}
});

You can identify your popup by a class, i chose popup here.
This code will hide the popup class element whenever a click is made outside of it.
So clicks on the window will not close it.
$("body").click(function() {
if ($(this).attr("class") != "popup") {
$(".popup").hide();
}
});

$('body').on('click',function(event){
event.stopPropagation();
$(".your_popup").hide();
});

toggleClass on the same container and show different content with tabs effect

I ran into this problem that if I toggleClass on the same container using different links trying to show different content it wont show the container on any second link right away. Basically it will close the container and then I would have to click the link once again in order to show the content. I am trying to achieve tabs effect using the same container and toggleClass and unfortunately I can't figure out of how to show the container right away on second link. I would appreciate any advice.
Here is a live example http://jsbin.com/eyEnEvEC/1/
and the entire code.
CSS
.container {
display:none;
}
.show {
display:block;
}
HTML
Link 1
Link 2
<div class="container"></div>
Javascript
$(function(){
$('#link1').click(function(){
$('.container').html('Test 1');
$('.container').toggleClass('show');
return false;
});
$('#link2').click(function(){
$('.container').html('Test 2');
$('.container').toggleClass('show');
return false;
});
});

Try this
HTML
Link 1
Link 2
JQuery
$(function(){
$.fn.toggleContent = function(ahtml) {
var cstatus = $(this).attr("data-status");
$("a[id^=link]").attr("data-status","inactive");
if(cstatus == "inactive") {
$('.container').html(ahtml).show();
$(this).attr("data-status","active");
}
else {
$('.container').html(ahtml).hide();
$(this).attr("data-status","inactive");
}
return false;
};
$('#link1').click(function(){
$(this).toggleContent('Test 1');
});
$('#link2').click(function(){
$(this).toggleContent('Test 2');
});
});
Demo : http://jsbin.com/eyEnEvEC/9/edit

jQuery sliding menu error

I'm doing animated menu with jQuery (3 levels). I'm using efects slideDown and slideUp. Sometimes (but no always), when I open submenu of first main item, submenu of second main item won't work until I refresh the page. It works OK with efects fadeIn and fadeOut, but I want to use slide.
Here is my code: http://jsfiddle.net/mcCAx/

The problem was the styling on your <ul class="SubStage"> element was being overridden. So, fight fire with fire by re-overwriting the styling in a callback. Your side menu shows up every time. :)
$(document).ready(function()
{
$('li.MainStage').hover(
function()
{
$(this).find('ul.SubStage').slideDown('slow',function(){
$(this).parent().find('ul.SubStage').css({overflow:"visible"});
});
},
function()
{
$(this).find('ul.SubStage').stop().slideUp('slow');
});
$('li.SubStage').hover(
function()
{
$(this).find('ul.Sub2Stage').slideDown('slow');
},
function()
{
$(this).find('ul.Sub2Stage').stop().slideUp('slow');
});
});​
Check it out here.

This fixed it for me Here
$(document).ready(function()
{
$('li.MainStage').hover( function()
{
$(this).stop();
$(this).find('ul.SubStage').slideDown('slow');
}, function()
{
$(this).stop();
$(this).find('ul.SubStage').slideUp('slow');
});
$('li.SubStage').hover( function()
{
$(this).stop();
$(this).find('ul.Sub2Stage').slideDown('slow');
}, function()
{
$(this).stop();
$(this).find('ul.Sub2Stage').slideUp('slow');
});
});