Mobile Menu toggleClass and removeClass - javascript

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");
}
});

Related

How to close navbar when clicking outside of it

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'
}

Logic to hide opened sub menu on click elsewhere?

Suppose user goes to a ecommerce site and clicks on products, there is a submenu which drops down. What logic to write to ensure that when user clicks on any other blank space(or elements) that submenu is hidden back?
Check this js fiddle:-
http://jsfiddle.net/H3Vnw/3/
Here is the java script code:-
$(document).mouseup(function (e)
{
var container = $('.dropdown-menu');
if (container.has(e.target).length === 0)
{
container.hide();
}
});
$('.comment').click(function(){
$('.dropdown-menu').css({'display': 'block'});
});
If we click on the comment we can get drop menu if we click else where the drop menu will be hidden!
Hope this helps!
Wild guess: something that listens to anything but the submenu click, and closes it.
// assumption: submenu has open() and close() functions
submenu.open();
var listener = document.addEventListener('click', function(e){
// TODO: how to check if click is on submenu?
if (e.target != submenu) {
submenu.close();
document.removeEventListener('click', listener);
}
});

Hamburger Responsive Button Click Event BUG

I have an annoying bug with a Hamburger button. I found on stackoverflow how to hide the dropdown menu when it is clicked somewhere else on the document but this lead to a bug where If I want to close the menu by clicking again on the hamburger icon it hides for a second and shows back again.
Advice on what I did wrong?
UPDATE: here it is http://jsfiddle.net/scuzgvmq/
Click on the button to slidedown and click agian to see the BUG
$('.hamburger').click(function() {
$('#header .responsive-menu').slideToggle();
});
$(document).mouseup(function (e) {
var container = $("#header .responsive-menu");
if (!container.is(e.target) // if the target of the click isn't the container...
&& container.has(e.target).length === 0) // ... nor a descendant of the container
{
container.hide('slow');
}
});
HTML
<ul class="responsive-menu">
<li>Example</li>
<li>Example</li>
<li>Example</li>
</ul>
<div class="hamburger"></div>
You need to check that the trigger isnt the hamburger button either like in this fiddle
$(document).ready(function () {
var container = $(".responsive-menu");
var hamburger = $(".hamburger");
hamburger.on('click', function () {
container.slideToggle();
container.addStyle('display:block');
});
$(document).on('mouseup', function (e) {
if (!container.is(e.target) && !hamburger.is(e.target) && container.has(e.target).length === 0) // ... nor a descendant of the container
{
container.hide('slow');
}
});
});

How to close an open collapsed navbar when clicking outside of the navbar element in Bootstrap 3?

How can I close an open collapsed navbar on clicking outside of the navbar element? Currently, the only way to open or close it is by clicking on the navbar-toggle button.
See here for an example and code:
So far, I have tried the following which doesn't seem to work:
jQuery(document).click(function() {
});
jQuery('.navbar').click(function(event) {
jQuery(".navbar-collapse").collapse('hide');
event.stopPropagation();
});
Have a look that:
$(document).ready(function () {
$(document).click(function (event) {
var clickover = $(event.target);
var _opened = $(".navbar-collapse").hasClass("navbar-collapse in");
if (_opened === true && !clickover.hasClass("navbar-toggle")) {
$("button.navbar-toggle").click();
}
});
});
Your fiddle works with that: http://jsfiddle.net/52VtD/5718/
Its a modified version of this answer, which lacks the animation and is also a tiny bit more complicated.
I know, invoking the click() isn't very elegant, but collapse('hide') did not work for me either, and i think the animation is a bit nicer than adding and removing the classes hardly.
The accepted answer doesn't appear to work correctly. It only needs to check if "navbar-collapse" has the "in" class. We can then fire the collapse method as expected by using our reference to the navbar.
$(document).click(function (event) {
var clickover = $(event.target);
var $navbar = $(".navbar-collapse");
var _opened = $navbar.hasClass("in");
if (_opened === true && !clickover.hasClass("navbar-toggle")) {
$navbar.collapse('hide');
}
});
Using this works for me.
$(function() {
$(document).click(function (event) {
$('.navbar-collapse').collapse('hide');
});
});
The solution I decided to use was taken from the accepted answer here and from this answer
jQuery('body').bind('click', function(e) {
if(jQuery(e.target).closest('.navbar').length == 0) {
// click happened outside of .navbar, so hide
var opened = jQuery('.navbar-collapse').hasClass('collapse in');
if ( opened === true ) {
jQuery('.navbar-collapse').collapse('hide');
}
}
});
This hides an opened collapsed nav menu if the user clicks anywhere outside of the .navbar element. Of course clicking on .navbar-toggle still works to close the menu too.
Converted nozzleman's answer for Bootstrap 4(.3.1):
$(document).ready(function () {
$(document).click(
function (event) {
var target = $(event.target);
var _mobileMenuOpen = $(".navbar-collapse").hasClass("show");
if (_mobileMenuOpen === true && !target.hasClass("navbar-toggler")) {
$("button.navbar-toggler").click();
}
}
);
});
Placed in the ngOnInit().
When the document is loaded, this code waits for click events. If the mobile menu dropdown is open (i.e. the collapsible part of the navbar has the "show" class) and the clicked object (target) is not the mobile menu button (i.e. does not have the "navbar-toggler" class), then we tell the mobile menu button it has been clicked, and the menu closes.
stopPropagation() is not always the best solution. Rather use something like:
jQuery(document.body).on('click', function(ev){
if(jQuery(ev.target).closest('.navbar-collapse').length) return; // Not return false
// Hide navbar
});
I think it's dangerous to assume that you never want to listen to any other event from the .navbar. Which is impossible if you use stopPropagation().
I had a scenario where I had plain text and I didn't want the panel to close if a user clicks on the plain text on accident. The other answers here will close the panel even if you click on the text of an item that isn't a link.
To fix this I added on to Paul Tarr's answer by wrapping the solution in a check to see whether or not the click occurred anywhere inside:
if ($(event.target).parents(".navbar-collapse").length < 1) { }
The full code would become:
$(document).click(function (event) {
if ($(event.target).parents(".navbar-collapse").length < 1) {
var clickover = $(event.target);
var $navbar = $(".navbar-collapse");
var _opened = $navbar.hasClass("in");
if (_opened === true && !clickover.hasClass("navbar-toggle")) {
$navbar.collapse('hide');
}
}
});
In this demo fiddle you can see that if you click on a non-link inside of the panel it won't collapse it.
For latest Bootstrap, this is the correct answer.
$(document).click(function (event) {
var clickover = $(event.target);
var $navbar = $(".navbar-collapse");
var _opened = $navbar.hasClass("show");
if (_opened === true && !clickover.hasClass("navbar-toggler")) {
$navbar.collapse('hide');
}
});
It reads if .navbar-collapse has the word show in classes (which means menu is opened) and hides the navbar when you click/tap anywhere.
I've added a condition to #nozzleman's answer to check if the tap or click has been made on any element within the menu, and if that's the case, not to collapse it.
$(document).ready(function () {
$(document).click(function (event) {
var clickover = $(event.target);
var _opened = $(".navbar-collapse").hasClass("navbar-collapse in");
if (_opened === true && !clickover.hasClass("navbar-toggle") && clickover.parents('.navbar-collapse').length == 0) {
$("button.navbar-toggle").click();
}
});
});
The following code works for me and the advantage is that on small screens, it does not hide the .collapse when you click on its nav parent with .navbar .navbar-expand classes:
$(document).click(function (e) {
if($('.collapse').hasClass('show') && !$('nav').is(e.target) && $('nav').has(e.target).length === 0){
$('.navbar-toggler').click()
}
})
Vanilla Javascript.
Working on Bootstrap 5.2.
window.onload = function () {
document.addEventListener("click", function (event) {
// if the clicked element isn't child of the navbar, you must close it if is open
if (!event.target.closest("#navbar_id") && document.getElementById("navbarSupportedContent").classList.contains("show")) {
document.getElementById("hamburger_menu_button").click();
}
});
}
https://jsfiddle.net/j4tgpbxz/
You just need to add an id to the navbar element, and then check if the clicked element is a child of that same navbar and the content you want to hide (dropdown) is being shown.
For Bootstrap 4
Bootstrap 4 doesn't have an in class. This is Coffeescript.
$(document).click (e)->
#console.log e.target
unless $('#toggle-button').has(e.target).length || $('#toggle-menu').has(e.target).length
$('#toggle-menu').collapse('hide')
So basically, unless you click the button or the menu, close the menu.
Note: Strange, on iOS clicking on text doesn't register a click event, nor a mouseup event. Clicking on an image does fire events though.
For Bootstrap 4:
$(document).click(function(event) {
$(event.target).closest(".navbar").length || $(".navbar-collapse.show").length && $(".navbar-collapse.show").collapse("hide")
});
$(document).click(function (event) {
if ($('.navbar-collapse').attr('aria-expanded') == "true") {
$('.navbar-collapse:visible').click();
}
});
$(window).click(function (e) {
if ($(e.target).closest('.codehim-dropdown').length) {
return;
}
if ($(e.target).closest(offCanvas).length) {
return;
}
//check if menu really opened
if ($(hamburger).hasClass("active")) {
closeMenu();
}
$(dimOverlay).fadeOut();
$(".menu-items").slideUp();
$(".dropdown-heading").removeClass("active");
});
I had some problems with some answers here, and I would like to also be able to close the expanded menu on demand. So I did it with a simple function, and simulating the click.
function closeMenu(){
element = document.getElementById('nav_top');
if(element){
if(element.classList.contains('show')){
document.getElementById('navbar_toggler').dispatchEvent(new CustomEvent('click'));
}
}
}
$(document).ready(function () {
$(document).click(function (event) {
closeMenu();
});
});
Using this method you can close it when clicked outside, but also you can call the closeMenu() at any time from any other function.
I know its quite awhile for the answer. But I think the answer here could helps.
Lets say the condition: if user want to close the navbar when click outside but not when user click any element inside of the navbar
use the event.target and target the element's closest classname whether its has the navbar class or not. If yes which means user is clicking element inside of the navbar and not to close the navbar.
$(function() {
$(document).click(function (event) {
var clickover = $(event.target);
var _opened = $(".navbar-collapse").hasClass("navbar-collapse collapse show");
if (_opened === true && clickover.closest('.navbar').length === 0) {
$(".navbar-collapse").collapse('hide');
}
});
});

JQuery Toggle...one click to open - double to close

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");
}
});

Categories

Resources