We Keep Coding

JS Toggle Submenu within Mega Menu

The issue I'm having is, creating a submenu inside another menu.
Demo: LIVE DEMO (Important, cause CSS is needed as well
$(function () {
// Desktop Menu
var categoriesMenu = $(".list-ausbildung-categories li");
var triggerMenu = $(".dropdown-submenuSide");
var highlightsList = $(".list-ausbildung-highlights");
var submenuList = $(".list-ausbildung-submenu");
$('.list-ausbildung-categories').on('click', 'li', function () {
if( $(this).hasClass('active') ){
triggerMenu.removeClass('asg-gray-bg-200');
$(".dropdown-submenuSide .list-ausbildung-submenu ul").html('');
} else {
highlightsList.hide();
submenuList.show();
triggerMenu.addClass('asg-gray-bg-200');
$('li.active').removeClass('active');
$(this).addClass('active');
var subMenu = $(this).find(".dropdown-submenu").html();
$(".dropdown-submenuSide .list-ausbildung-submenu ul").html(subMenu);
}
});
$('.asg-megamenu div[class^="col"]:first-child').on('click', function () {
categoriesMenu.removeClass('active');
triggerMenu.removeClass('asg-gray-bg-200');
submenuList.hide();
highlightsList.show();
});
});
I'm having this Bootstrap Mega Menu, which also contains a submenu (Column 2). On click, it should hide Column 3, and show the submenu items. (it does its job)
Currently, I'm grabbing the submenu content with jquery html() and then placing it on the third column (probably not the cleanest method).
The problem: whenever I close a submenu and click again, it won't open back.

It looks like currently, the active class isn't removed on the second click. Instead, it just clears out the HTML of column three. We could fix that by adding a line to remove the active class when we hide the submenu.
if( $(this).hasClass('active') ){
$(this).removeClass('active'); // add in this line here so it will trigger properly on the next click
triggerMenu.removeClass('asg-gray-bg-200');
$(".dropdown-submenuSide .list-ausbildung-submenu ul").html('');
}

Need menu to close when anything other than a link is clicked (including the menu icon)

http://emperor.graphics/
As you'll probably be able to tell by my JavaScript, I am no expert. I cobbled this together from multiple sources and it mostly works, but there are two frustrations I'm having:
On mobile, the menu does not always close when you tap outside it.
Clicking the menu icon itself does not close the menu.
$(function() {
$('.dropdown-toggle').click(function(){
$(this).next('.dropdown').addClass("nav-open");
});
$(document).click(function(e) {
var target = e.target;
if (!$(target).is('.dropdown-toggle') &&
!$(target).parents().is('.dropdown-toggle')) {
$('.dropdown').removeClass("nav-open");
}
});
});
Any help is greatly appreciated!

Maybe you want this?
$(function() {
var toggle = ".dropdown-toggle";
$(toggle).on("click", function(){
$(this).next('.dropdown').toggleClass("nav-open");
});
$(document).click(function(e) {
var target = $(e.target);
if (!target.is(toggle) && !target.parent().is(toggle)) {
$(".dropdown").removeClass("nav-open");
}
});
});

JQuery hover dropdown menu disappears when hovering on the dropdown menu

I'm doing something slightly different to what i've seen work, many people have done it so there dropdown is part of a child list. However i'm trying to work with a sibling dropdown menu.
Here is my fiddle: http://jsfiddle.net/58m99wf8/
What you'll notice is that if you hover on the button, the dropdown menu appears. If you leave the button it disappears which is perfect. However if you hover on the dropdown menu it still disappears and this isn't what I want it to do.
How can i prevent this?
I've seen it work like this:
if($('#menuONE').has(e.target).length === 0) {
// toggle menu to close
}
However i don't see how i can attach this to the submenu as well as the button.

What you can do is add the menu to the selector.
I also defined menu because this can refer to the button or the menu now, so traversing from there could be problematic.
var menu = $('.dropdown-menu');
$('.dropdown-hover-toggle, .dropdown-menu').hover(
function () {
//show its sibling menu
menu.stop().slideDown();
},
function () {
//hide its sibling menu
menu.stop().slideUp();
});
http://jsfiddle.net/58m99wf8/1/

Try this
var isSiblingHovered = false;
$('.dropdown-hover-toggle').hover(function () {
$(this).siblings('.dropdown-menu').slideDown();
},
function () {
var current = $(this);
setTimeout(function(){
if(!isSiblingHovered){
current.siblings('.dropdown-menu').stop().slideUp();
}
}, 50);
});
$('body').on("mouseleave", ".dropdown-menu", function() {
isSiblingHovered = false;
$('.dropdown-menu').stop().slideUp();
});
$('body').on("mouseenter", ".dropdown-menu", function() {
isSiblingHovered = true;
});
EXAMPLE

How to keep next() function from hiding on hover?

I have a simple jquery menu and I am trying to keep the submenu visible if a user hover overs it. so that I can select it if needed. However, when I get off the hover element the submenu will hide. Obviously, that's what I want as long as it's not also hovering over the submenu.
$(document).ready(function () {
$('.mainBar li a').hover(function(){
$(this).next().show() }, function () {
$(this).next().stop().hide()
});
});
http://jsfiddle.net/azxRX/1/

My opinion is to create this menus with css. Anyway i change a bit to this:
$('.sideBar > ul > li').bind('mouseover', openSubMenu);//This line sets it up so that when the mouse is moved over a li in myMenu, the function openSubMenu is called
$('.sideBar > ul > li').bind('mouseout', closeSubMenu);//This do exacly the same with the above but binds on mouseout instead.
function openSubMenu() {
///when the mouse rolls over the list item,
///the function looks for an unordered list within it.
///If one is found, it sets the style property display to block
$(this).find('ul').css('display', 'block');
};
function closeSubMenu() {
///This one does the oposite of openSubMenu function
$(this).find('ul').css('display', 'none');
};
fiddle

You can do this instead:
$(document).ready(function () {
$('.mainBar li').mouseover(function () {
$(this).find('.subBar').show();
console.log('over');
});
$('.mainBar li').mouseout(function () {
$(this).find('.subBar').hide();
});
});
This is the jsfiddle

my menu overflows the space

I have tried to make a menu that collapses earlier expanded chioces but i cant make it work.
var currentId;
$(document).ready(function () {
$(":range").rangeinput({
progress: true
});
/* Slide Toogle */
$("ul.expmenu li > div.header").click(function () {
var arrow = $(this).find("span.arrow");
if (arrow.hasClass("up")) {
arrow.removeClass("up");
arrow.addClass("down");
} else if (arrow.hasClass("down")) {
arrow.removeClass("down");
arrow.addClass("up");
}
$('#' + currentId).parent().find("ul.menu").slideToggle();
$(this).parent().find("ul.menu").slideToggle();
currentId = $(this).attr('id');
});
});
You can find the homepage at this adress: http://admin.dq.se/kramers/nyamenyer.html
So if I press "BIL" i want "BIL" to expand .. and afterwards if i press "MC" i want BIL to collapse and MC to expand. Thanks for the help!

Slide up everything before sliding down
$("ul.expmenu li > div.header").click(function () {
$(this).parent().siblings().find('ul.menu').slideUp();
$(this).parent().siblings().find('span.arrow').removeClass('up').addClass('down');
....
});

This isn't quite right:
$(this).parent().find("ul.menu").slideToggle();
You need to go up higher:
$(this).closest('ul.expmenu').find("ul.menu").slideToggle();

I would do something roughly like this:
/* Slide Toogle */
$("ul.expmenu li > div.header").click(function () {
var arrow = $(this).find("span.arrow");
if (arrow.hasClass("up")) {
arrow.removeClass("up");
arrow.addClass("down");
} else if (arrow.hasClass("down")) {
$('.arrow.up.').parents('li').children('ul.menu').slideUp();
$('.arrow.up.').removeClass('up').addClass('down');
arrow.removeClass("down");
arrow.addClass("up");
}
Which basically looks for any 'up' arrows, and brings their menus up (note the DOM traversing), only in the event that the arrow in question is still "down".