We Keep Coding

And and remove classes when click on nav item and outside

I'm trying to build a tricky navigation menu that needs to do the following:
When click in a nav item, .active class should be added to that item and removed from the previous one.
When one dropdown is open and you click to open another one the previous one should close and the new one should open in one click.
When click in a nav item it should open its respective dropdown container (at the moment it opens every dropdowns at once.)
and it should add .black-bg class to main-container underneath it.
When click anywhere outside the dropdown its active class .active should be removed as well as the class .black-bg in main-container underneath it.
JS
$(document).ready(function() {
$(".click").on("click", function(evt) {
evt.stopPropagation();
$(this).toggleClass("active");
$(".showup").slideToggle(200);
$(".main-container").toggleClass("black-bg");
});
$(".showup").on("click", function(evt) {
evt.stopPropagation();
});
});
$(document).on("click", function() {
$(".showup").slideUp(50);
});
This is what I came up with so far:
SEE DEMO
See demo here
I hope the above makes sense and someone could help me as I'm really stuck with this nav.
Thank you so much!

I recommend not using jQuery for this because of the exact issues you're running into. Try using Vue or Preact
However, if you insist on using jQuery, your click function should select the item that has "active", and modify it and its siblings accordingly.
https://codepen.io/anon/pen/aGwdXO
$(document).ready(function() {
$(".click").on("click", function(evt) {
evt.stopPropagation();
if ($(this).hasClass("active")) {
return;
}
$(".active").parent().find(".showup").slideToggle(200);
$(".active").toggleClass("active");
$(this).toggleClass("active");
$(this).parent().find(".showup").slideToggle(200);
if (!$(".main-container").hasClass("black-bg")) {
$(".main-container").toggleClass("black-bg");
}
});
$(".showup").on("click", function(evt) {
evt.stopPropagation();
});
});
$(document).on("click", function() {
$(".active").parent().find(".showup").slideUp(50);
$(".active").toggleClass("active");
if ($(".main-container").hasClass("black-bg")) {
$(".main-container").toggleClass("black-bg");
}
});

Check this. Just add class showup1, showup2, etc and data-showup="1", data-showup="2" attr in each menu item. (Working in nav items 1 and 2).
$(".click").on("click", function(evt) {
evt.stopPropagation();
var showup = $(this).data('showup');
if(!$(this).hasClass('active')){
$('.active').removeClass('active');
$(this).addClass("active");
$(".showup").hide();
$(".showup"+showup).slideToggle(200);
$(".main-container").addClass("black-bg");
});
Run

Unable to repeat click event

This is basically a menu toggle feature which I want to repeat but can't achieve the intended unless I refresh the page. Clicking on .fa-bars adds class .animate to body which slides in the menu from the left, when the menu is visible clicking anywhere outside the menu area, it hides the menu as well as removes the class.animate from body.
This only works once then I refresh the page.
Any help in this regard will be appreciated
jQuery code
$(document).ready(function()
{
$(document).on('click', function()
{
if($('body').hasClass('animate'))
{
$('body.animate').on('click', function()
{
$(this).removeClass('animate');
});
}
else
{
$('.fa-bars').on('click', function()
{
$('body').addClass('animate');
});
}
});
});

I think he want to close menu when click on body only. This code may help:
$(document).ready(function () {
$('.fa-bars').on('click', function (evt) {
$('body').addClass('animate');
evt.stopPropagation();
});
$('body').on('click', function () {
if ($('body').hasClass('animate')) {
$('body').removeClass('animate');
}
});
});
Click on fb-bars to open menu
Click on body to close menu if already opened

Onepage navigation script needs to troggle / close on click on link

I have an onepage site with a responsive navigation script. Works great.
When you click on the Navigation button the "subnav" links show up. (These are anchors).
I need to toggle/close the subnav when clicking on a link/anchor.
Made an example here:
https://jsfiddle.net/fourroses666/jcj0kph2/
The script:
$(document).ready(function(){
$('nav').prepend('<div class="responsive-nav" style="display:none">Navigation</div>');
$('.responsive-nav').on('click',function(){
$('nav ul').slideToggle()
});
$(window).resize(function(){
if ($(window).innerWidth() < 768) {
$('nav ul li').css('display','block');
$('nav ul').hide()
$('.responsive-nav').show()
} else {
$('nav ul li').css('display','inline-block');
$('nav ul').show()
$('.responsive-nav').hide()
}
});
$(window).resize();
});

You may tidy up your code a bit by doing the prepend and attaching the click handler all in one statement as below.
var $nav = $('#nav').
prepend('<div class="responsive-nav" style="display:none">Navigation</div>').
on('click', '.responsive-nav, ul a', function() {
$nav.find('ul').slideToggle()
});
Updated fiddle
Note: I used $nav.find('ul') to target the specific nav in question as opposed to other navs that may exist on the page.
Edit: To make it not disappear when on >= 768, replace $nav.find('ul').slideToggle() with the following.
if (evt.target.tagName === 'A' && $(window).innerWidth() >= 768) {
return;
}
$nav.find('ul').slideToggle()
Updated fiddle

I'm assuming you want the Nav to hide when you click on a link?
/* This executes when the nav or li (inside #nav) is pressed */
$('#nav').on('click', 'li, .responsive-nav', function(){
$('nav ul').slideToggle()
});
https://jsfiddle.net/jcj0kph2/1/

closing dropdown mobile menu after opening and loading a menu items

I am using the foundation off-canvas menu with dropdown. Some of the items menus are not clickable but showing their submenus using this function:
$('.page-item-1765 > a, .page-item-1761 > a').click(function(e){
$(this).parent().children('ul.children').slideToggle();
e.preventDefault();
});
This works perfectly. But what I need is to have other items menu clickable, showing their submenus stayed on the dropdown opened and be able to close the dropdown afterwards by clicking a second time on the items menus.
I tried this but it doesn't work:
$('.page-item-12 > a').on('open').click(function(){
$(this).parent().children('ul.children').slideToggle();
});
I also tried:
$('.page-item-12 > a').on('close').click(function(){
$(this).parent().children('ul.children').slideDown();
});
$('.page-item-12 > a').on('open').click(function(){
$(this).parent().children('ul.children').slideUp();
});
But still doesn't work. Someone can help me on this?

try
$('.page-item-12 > a').on('click', function () {
if ($(this).css('display') == 'none') {
// your menu is closed
} else {
// your menu is opened
}
});

Javascript mobileMenuToggle Function need to be load with site

I am new to stackoverflow.com, looking for a bit help of a code hope you can help me out.
Here is website http://newwebdemo.com/builf/
If you open this website in mobile or resize your windows to smaller, you will see a mobileMenuToggle will appear instead of normal desktop menu of website!
What i want is currently the menu slidedown when i click on it and close once i click on it again, i need it to be default opened with website is load, and i can close it when i click on it,
Here is the code if this section, your help will solve my problem
if(navigator.userAgent.match(/iPad/i) || navigator.userAgent.match(/Android/i)) {
$('#header-wrapper').addClass('is_tablet');
$('#header-inner .mobile-nav').css('display','block');
$('#header-inner ul.navigation, #header-inner ul.mobile-navigation').css('display','none');
$('#header-inner .mobileMenuToggle').css('display','block');
$('.menu').not('.mobile-nav .menu').css({display:'none'});
}
$('.mobileMenuToggle a').on('click', function() {
if($(this).hasClass('open')) {
$('ul.mobile-navigation').slideUp(400,'easeInOutQuint');
$(this).removeClass('open');
} else {
$('ul.mobile-navigation').slideDown(400,'easeInOutQuint');
$(this).addClass('open');
}
return false;
});
What it is doing currenty is adding class name "open" to
<div class="mobileMenuToggle"></div>
when you click it change in code like that and menu slidedown and open
<div class="mobileMenuToggle"></div>
you can see once i click on menu while i am on mobile or in smaller size of browser, it open menu on click, i want it to be default opened with website!
Can please someone help ?

Just add a trigger after attaching the click event, something like:
if(navigator.userAgent.match(/iPad/i) || navigator.userAgent.match(/Android/i)) {
$('#header-wrapper').addClass('is_tablet');
$('#header-inner .mobile-nav').css('display','block');
$('#header-inner ul.navigation, #header-inner ul.mobile-navigation').css('display','none');
$('#header-inner .mobileMenuToggle').css('display','block');
$('.menu').not('.mobile-nav .menu').css({display:'none'});
}
$('.mobileMenuToggle a').on('click', function() {
if($(this).hasClass('open')) {
$('ul.mobile-navigation').slideUp(400,'easeInOutQuint');
$(this).removeClass('open');
} else {
$('ul.mobile-navigation').slideDown(400,'easeInOutQuint');
$(this).addClass('open');
}
return false;
});
$(function() {
$( window ).resize(function() {
if (jQuery('.mobileMenuToggle').is(':visible')) { jQuery('.mobileMenuToggle a').click() }
}).trigger('resize');
});
If you want to update the page upon resize, then you should attach resize event and track the visibility in there..