I am working on a sidebar navigation: And the sidebar opens when we click on the toggle button and it stays open until we click again on the toggle button.
For the same sidebar I have a hover function : on mouseEnter sidebar opens and onMouseLeave sidebar closes.
The problem I have is with the closing the sidebar onClick. When I click close on the toggle button the sidebar stays open because the mouseEnter function is triggered.
I want the mouseEnter to be ready after the navbar close animation is finished.
Here is my code for the click event:
$('body').on('click', '.sidebar-toggler', function (e) {
var sidebar = $('.page-sidebar');
var sidebarMenu = $('.page-sidebar-menu');
if (body.hasClass("page-sidebar-closed")) {
body.removeClass("page-sidebar-closed");
sidebarMenu.removeClass("page-sidebar-menu-closed");
} else {
body.addClass("page-sidebar-closed");
sidebarMenu.addClass("page-sidebar-menu-closed");
if (body.hasClass("page-sidebar-fixed")) {
sidebarMenu.trigger("mouseleave");
}
}
and here is the code for the hover event:
if (body.hasClass('page-sidebar-fixed')) {
$('.page-sidebar').on('mouseenter', function () {
if (body.hasClass('page-sidebar-closed')) {
$(this).find('.page-sidebar-menu').removeClass('page-sidebar-menu-closed');
}
}).on('mouseleave', function () {
if (body.hasClass('page-sidebar-closed')) {
$(this).find('.page-sidebar-menu').addClass('page-sidebar-menu-closed');
}
});
}
Try to .off() the mouseenter event when the sidebar is opened with the toggle button.
http://api.jquery.com/off/
Related
How can I edit my code so that the navbar closes when clicked outside of it but remain open if something inside of it is clicked?
$(document).ready(function() {
$('.nav-btn').on('click', function() {
$('.nav-btn').removeClass('active');
$(this).parent().find('.sub-menu').slideToggle();
$(this).toggleClass('active');
});
});
$(document).ready(function () {
$('.nav-btn').on('click', function (e) {
// Stop Document to be clicked when clicked in nav.
e.stopPropagation()
$('.nav-btn').removeClass('active');
var subMenu = $(this).parent().find('.sub-menu')
if (!$(".sub-menu").is(":visible")) {
$(this).parent().find('.sub-menu').slideToggle();
}
$(this).toggleClass('active');
});
// Toggle Sub Menu and remove active when Any vacant place is clicked
$(this).on('click', function (event) {
$('.nav-btn').removeClass('active');
$('.nav-btn').parent().find('.sub-menu').slideToggle();
});
// Prevent View close when Sub Items is clicked
$('.sub-menu').on('click', function (e) {
e.stopPropagation()
})
});
Hi, You just need to prevent the document click when clicked on the nav item and handle some additional things as done in the above code.
You can see Plunker example here also.
$(document).on('click', function (event) {
if ($(event.target).closest('.main-nav').length === 0) {
// Close button code
}
});
Another possible way is by wrapping all the content inside another div (except the header & navbar) and using the onclick tag:
<div onclick="hideNavbar()">
all your content goes here
</div>
function hideNavbar() {
$('.navbar-collapse').collapse('hide');
// getting the navbar div with jQuery
// and calling the function 'hide' of the Bootstrap class 'collapse'
}
I got two functions, one that collapses stuff when someone clicks the header of that collapsable, and I got a function that opens a modal, but the open modal icon that I use as a trigger to open the modal, is on the header of the collapsable, so when someone clicks the icon, it both opens the modal, and does the collapse stuff, but I just want to open the modal and not do the collapse stuff, so how can I prevent it from triggering my collapse?
Collapse
$(document).on('click', '.panel-heading', function () {
var valgtElement = $(this).next();
$.each($('.panel-collapse'), function (index, value) {
if ($(this).attr('id') == valgtElement.attr('id')) {
$(this).collapse('toggle');
} else {
if ($(this).hasClass('in')) {
$(this).collapse('toggle');
}
}
});
});
Icon click
$('body').on('click', '.fa-trash-o', function () {
$('#slettModal').modal();
});
Use stopPropagation
$('body').on('click', '.fa-trash-o', function (e) {
e.preventDefault();
e.stopPropagation();
$('#slettModal').modal();
});
just use event.stopPropagation()
Link for more details
$('body').on('click', '.fa-trash-o', function (e) {
e.preventDefault();
e.stopPropagation();
$('#slettModal').modal();
});
Try this
$('body').on('click', '.fa-trash-o',
function (event) {
event.stopImmediatePropagation()
$('#slettModal').modal();
});
make sure to include the event parameter in the function declaration
http://api.jquery.com/event.stopImmediatePropagation/
How to prevent other event handlers, from first handler, in jQuery
I have a series of divs that reveal on link click. When revealed i'm trying to make them close on background click while maintaining their ability to have the different divs replace each other when different links are clicked.
JS fiddle here: http://jsfiddle.net/t593pyg9/3/
$(document).ready(function () {
$('.toggle').hide();
$('a.togglelink').on('click', function (e) {
e.preventDefault();
var elem = $(this).next('.toggle')
$('.toggle').not(elem).hide();
elem.toggle();
});
});
Listen to clicks on the entire document, to prevent this from closing the "popup" after clicking it's link due to event propagation add a return false; to the show click listener.
$('.toggle').hide();
$('a.togglelink').on('click', function (e) {
e.preventDefault();
var elem = $(this).next('.toggle')
$('.toggle').not(elem).hide();
elem.toggle();
return false;
});
$(document).on('click',function(e){
$('.toggle').hide();
});
Fiddle
Update
If you want to prevent the popup from hiding on clicking on it add this:
$('.toggle').on('click', function (e) {
return false;
});
New Fiddle
So I have your typical button to display the menu on mobile devices. The first code works great. Click the button and the menu opens and closes. The client wants the menu to close if you click on something other than the menu, including the button. Once I add the second code, the menu opens when you click on the button and closes when you click on the "content." But the menu doesn't close when you click on the button again. I've tried changing "toggleClass" to just "addClass" but it's the same issue. The button is not part of the menu so I'm kind of at a loss here. Can anyone help? Need I explain more?
$(document).ready(function(){
$("#mobile-menu-button").click(function () {
$("#mobile-nav").toggleClass("nav-open");
$(".mobile").toggleClass("to-left");
});
});
/* When Mobile Menu open, close by clicking other than menu */
$(document).mouseup(function (e) {
var container = $(".nav-open");
if (!container.is(e.target)
&& container.has(e.target).length === 0) {
container.removeClass("nav-open");
$(".mobile").removeClass("to-left");
}
});
Working Demo : http://jsfiddle.net/TSC5N/1/
Update the JS like this :
$(document).ready(function(){
$("#mobile-menu-button").click(function () {
$("#mobile-nav").toggleClass("nav-open");
$(".mobile").toggleClass("to-left");
});
});
/* When Mobile Menu open, close by clicking other than menu */
$(document).mouseup(function (e) {
var container = $(".nav-open");
var button = $('#mobile-menu-button');
if (!container.is(e.target)
&& container.has(e.target).length === 0 && !button.is(e.target)) {
container.removeClass("nav-open");
$(".mobile").removeClass("to-left");
}
});
The problem was when you click on button, Menu will toggle and nav-open class will be added. But button is considered out side of the menu. So Now when you click again on button mouseup function will remove the class nav-open. But toggle event will fire and again same class will be added. So at the end menu will have nav-open class again.
Whats the fix :
!button.is(e.target) condition will check if the clicked item is button or not.
Use this code. http://jsfiddle.net/5gcSt/
$("#mobile-menu-button").click(function () {
if($("#mobile-nav").hasClass('nav-closed')){
$("#mobile-nav").addClass("nav-open");
$("#mobile-nav").removeClass("nav-closed");
$(".mobile").addClass("to-left");
}
else{
$("#mobile-nav").addClass("nav-closed");
$("#mobile-nav").removeClass("nav-open");
$(".mobile").removeClass("to-left");
}
});
/* When Mobile Menu open, close by clicking other than menu */
$(document).mouseup(function (e) {
var container = $(".nav-open");
var button = $('#mobile-menu-button');
if (!container.is(e.target)
&& container.has(e.target).length === 0) {
container.removeClass("nav-open");
$(".mobile").removeClass("to-left");
}
});
I created a mobile menu with a toggle switch.
When I click on the div "dropdown-menu" it opens.
When I click again it closes. But i want it to open with one click and to close with double click.
What do I need to add to my code??
$('.dropdown-menu').click(function() {
$('.dropdown-menu').not(this).children('ul').slideUp("slow");
$(this).children('ul').slideToggle("slow");}
);
$('.dropdown-menu').blur(function() {
$('.dropdown-inside').hide('slow', function() {
});
});
Try to use dblclick,
$('.dropdown-menu').click(function() {
$('.dropdown-menu').children('ul').slideUp("slow");// slideUp all drop-downs
$(this).children('ul').slideDown("slow");// use slideDown instead slideToggle
});
$('.dropdown-menu').dblclick(function() {
$(this).children('ul').slideUp("slow");
});
To prevent sliding after clicking once try this,
$('.dropdown-menu').click(function() {
if( !$(this).children('ul').is(':visible')) {// slide, if ul is not visible
$('.dropdown-menu').children('ul').slideUp("slow");
$(this).children('ul').slideDown("slow");
}
});