0
I am using the following script so that the dropdown menu of Bootstrap does not close when clicking on some other point of the page:
$(document.body).on('click', function(event){
var windowWidth = $(window).width();
if(windowWidth > 991){
if (!$(event.target).closest('.dropdown-toggle').length) {
event.stopPropagation();
}
}
});
The problem is that all other modules (Carousel, panel, etc) stop working. Any hints?
1
The solution I found was:
If not to hide then save what is open and then open again.
Stayed like this.:
$(document.body).on('click', function(event){
var windowWidth = $(window).width();
if(windowWidth > 991){
if (!$(event.target).closest('.dropdown-toggle').length) {
var obj=$('.dropdown.open');
setTimeout(function(){obj.addClass('open');},0);
}
}
});
The example in jsfiddle.
Cool. Solved the problem. But the menu blinks when another page item is clicked. It has how to solve?
Well, I noticed, but I don’t see how I can get past it if I can think of an edit :D
I tried to give a false Return in Hide.bs.dropdown event. But then it won’t work again.
The blinking problem is setTimeout(), puts -1
The -1 did not solve
Strange, here it does not blink with -1.
1
Sorry, I understand what you wanted, try doing this:
I edited the question, see if it fits your purpose:
$(function() {
$('.dropdown.opened')
.on({
"shown.bs.dropdown": function() {
this.closable = ($('.dropdown.open').length > 1) ? true : false
},
"click": function() {
this.closable = true;
$('.dropdown.opened.open').trigger('click');
},
"hide.bs.dropdown": function() { return this.closable; }
});
});
The goal is to detect the clicks off the menu and not inside the menu. For what I noticed.
@Ivan Ferrer Ivan, Tiago is right. I need to detect when the menu is not clicked to keep it open.
I edited the question to be more objective.
@Ivanferrer Ivan, on the first click, the menu closes. It only stays open if I close and open again.
See if you’re right now, I don’t understand the negative, but the idea is that you close one so you can open the other, since you want to fix the menu...
1
I found this solution:
HTML
<li role="presentation" class="dropdown keep-open"> <a id="drop6" href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> Dropdown1 <span class="caret"></span> </a>
<ul id="menu3" class="dropdown-menu" aria-labelledby="drop6">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
Javascript
$('.dropdown.keep-open').on({
"shown.bs.dropdown": function() { this.closable = false; },
"click": function() { this.closable = true; },
"hide.bs.dropdown": function() { return this.closable; }
});
Hello, I didn’t try to repeat, I was simply making the answer when you created your.
0
The dropdown component of the bootstrap has events to handle all interactions.
show.bs.dropdown->This Event Fires immediately when the show instance method is called.
Shown.bs.dropdown->This Event is Fired when the dropdown has been made Visible to the user (will Wait for CSS Transitions, to complete).
Hide.bs.dropdown->This Event is Fired immediately when the Hide instance method has been called.
Hidden.bs.dropdown->This Event is Fired when the dropdown has finished being Hidden from the user (will Wait for CSS Transitions, to complete).
Source.:http://getbootstrap.com/javascript/#dropdowns
You can use this code.:
$('.dropdown.keep-open').on({
"shown.bs.dropdown": function() { this.closable = false; },
"click": function() { this.closable = true; },
"hide.bs.dropdown": function() { return this.closable; }
});
Source.:https://stackoverflow.com/questions/19740121/keep-bootstrap-dropdown-open-when-clicked-off
In the meantime, I checked that if we open a second menu, the first menu is open.
If it’s not the goal you can put this code.:
$('.dropdown').on({
"show.bs.dropdown": function() {
$('.dropdown.open').removeClass('open');
},
"shown.bs.dropdown": function() {
this.closable = false;
},
"click":function() {
this.closable = true;
},
"hide.bs.dropdown": function() {
return this.closable;
}
});
Example.:
http://jsfiddle.net/q6jGr/180/
James: you have two answers. Are different approaches or are the same answer?
@Sergio These are different answers. The first was a totally different approach where the question was met but flashed and it was necessary to check another option. I thought to edit and completely change the answer but the other is not incorrect so I thought it was positive to have 2 different answers.
0
Remove the data-toggle from your menu buttons and make their display code without affecting boostrap behavior.
I used your html window to click the buttons, find the internal menu and display it or not if clicked.
Just put this script:
$(document).ready(function(){
$('.nav-pills .dropdown a').on('click',function(){
var jqMenu = $(this).closest('.dropdown').find('.dropdown-menu');
if (jqMenu.length > 0)
{
if (jqMenu.is(':visible')) {
jqMenu.hide();
}
else {
jqMenu.show();
}
}
})
})
Browser other questions tagged javascript jquery twitter-bootstrap
You are not signed in. Login or sign up in order to post.
Hello, for me your question is very vague. can make a jsfiddle that has constriction?
– Tiago Gomes
@I put an example in Codepen.
– marcelo2605
Please mark an answer as correct. (if already solved) so the question is not open.
– Tiago Gomes