We Keep Coding

How to make dropdown menu close when opening another one

Hy!Im a iniciant in javascript.
I'm having trouble closing the dropdown when clicking on another open one.
I try this:
on('click', '.navbar .dropdown > a', function(e) {
if (select('#navbar').classList.contains('navbar-mobile')) {
e.preventDefault()
this.nextElementSibling.classList.toggle('dropdown-active')
} else {
this.previousElementSibling.classList.remove('dropdown-active');
}
}, true)
dropdown image opened items
Codepen code
Thank you for any help!

a few days later.
this is my solution:
Use querySelectorAll + forEach in .dropdown-active and then remove the class
on('click', '.navbar .dropdown > a', function (e) {
if (select('#navbar').classList.contains('navbar-mobile')) {
e.preventDefault()
document.querySelectorAll(".dropdown-active").forEach(function (element) {
element.classList.remove("dropdown-active");
});
this.nextElementSibling.classList.toggle('dropdown-active')
}
}, true)

Show/Hide with plus minus

So I've got it to work that it shows/hides the UL's/LI's, but I'm not sure what I'm doing incorrectly where it's not swapping out the +/- signs?
Here's my JS:
$(".top ul li:not(:has(li.current))").find("ul").hide().end() // Hide all other ULs
.click(function (e) {
if (this == e.target) {
$(this).children('ul').slideToggle();
}
$(this).children("li.menu-item-has-children").text(this.toggle ? "-" : "+");
return false;
});
I have a class setup to append the li with a li:before that add the + sign before the li that has the nested ul's. But I'm not sure if I am going about it the right way to swap out the signs.
Here's the fiddle that I made:
http://jsfiddle.net/bc4mg13a/

There you go: http://jsfiddle.net/bc4mg13a/13/
$(".menu-item-has-children").on("click", function(e){
e.stopPropagation();
var clickedLi = $(this);
$("> ul", clickedLi).slideToggle();
clickedLi.toggleClass("current");
});
To start with, your first js line is a has so much redundant stuff.
$(".top ul li:not(:has(li.current))").find("ul").hide().end() // Hide all other ULs
.click
could be:
$(".top ul li:not(.current)").find("ul").hide().end() // Hide all other ULs
.click
On the other hand, i changed your code slightly, simplified your selectors. On each li click, i select direct ul children, and the i slidetoggle + toggle class the 'current' class.
i also switch the plus sign via the current class on css.

Your code feels incredibly verbose. Well, at least your js. Here's a fiddle of your code that I modified a little bit.
Instead of hiding all your menus with js immediately on pageload, I applied a CSS display: none; to the sub-menu class:
.sub-menu {
display: none;
}
The js is cleaned up a bit, and since the click handler is bound to .menu-item-has-children, You're really only clicking on that to reveal the contained UL.
Give it a look. Hope it helps :)

Simply add:
$(this).toggleClass('open');
To this:
if (this == e.target) {
$(this).children('ul').slideToggle();
$(this).toggleClass('open'); // <--
}

you can just add $(this).toggleClass('open'); before you return false but I would strongly look more into what your code is doing. I'm not so sure the line before is doing anything.

Fixed JS:
$(".top ul li:not(:has(li.current))").find("ul").hide().end() // Hide all other ULs
.click(function (e) {
if (this == e.target) {
$(this).children('ul').slideToggle();
$(this).toggleClass('open'); // added
}
return false;
});
Just added "$(this).toggleClass('open');" to use the class you specified in your CSS instead of trying to manipulate the text manually.

you can do it like this and add $(this).toggleClass('open');
http://jsfiddle.net/bc4mg13a/5/

For how you have it set up, I would try...
$(".top ul li:not(:has(li.current))").find("ul").hide().end() // Hide all other ULs
.click(function (e) {
if (this == e.target) {
$(this).toggleClass("open");
$(this).children('ul').slideToggle();
}
return false;
});
Additional:
For formatting, you might want to do something like:
.menu-item-has-children {
&:before {
content:"+ ";
color: $white;
width: 10px;
display:inline-block;
}
}
.open {
&:before {
content:"- ";
color: $white;
width: 10px;
display:inline-block;
}
}

You don't need to use text(this.toggle ? "-" : "+");
Inside the condition, just toggle the class .open that you have already defined in your SCSS/CSS.
Like so -
$(this).toggleClass('open');
JSFiddle

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

Navigation dropdown toggle - mouseout as well as off hover?

Can someone help me adapt the following so that the dropdown menu not only hides on click, but also hides on mouseout and/or when another of the top level menu buttons is hovered on?
jsfiddle
$(document).ready(function () {
$("li").click(function () {
$('li > ul').not($(this).children("ul").toggle()).hide();
});
});
Still getting my feet wet with jQuery/script coding.
NOTE: I'm using divs as part of the structure of the dropdown, as in the instance that "ul" above is replaced by a div.
FYI, I can't take credit for the above, it is the work of Pramod Sankar L (user PSL).
Any help would be appreciated!

Try
.mouseleave()
:has()
$(document).ready(function () {
$("li:has(ul)").click(function () {
$('li > ul').not($(this).children("ul").toggle()).hide();
}).mouseleave(function () {
$('li > ul').hide();
});
});
$("li:has(ul)") select li which contains ul
Fiddle Demo
Updated After Op's Comment
$(document).ready(function () {
$("#dropmenu li:has(div)").click(function () {
$('#dropmenu li.second-level > #dropmenu li.second-level div.drop_6col-bottom').not($(this).children("#dropmenu li.second-level div.drop_6col-bottom").toggle()).hide();
}).mouseleave(function () {
$(this).children('div').hide();
});
});

Make last hovered menu item stay open

I have a menu that when hovered, shows the subnav of the current hovered item by adding .stick to the submenu and removing it on mouseleave. If not hovering on another menu item I want the last hovered menu item to stay open for another 2 seconds before hiding.
Here's what I have. I know that the mouseleave() called on the container won't work since it's within the handlerOut of the ul#main-nav > li hover function but I left it to show you where I last left off.
$('ul#main-nav > li').hover(function() {
var $this = $(this);
clearTimeout(window.menustick);
$this.find('ul.submenu').addClass('stick');
}, function() {
var $this = $(this);
if($this.siblings().hover()) {
$this.find('ul.submenu').removeClass('stick');
} else if ($('#main-nav').mouseleave()) {
window.menustick = setTimeout(function(){
$this.find('ul.submenu').removeClass('stick');
}, 2000);
}
});
Here's the jsFiddle.
Thanks in advance!

JS:
$("ul#main-nav > li").hover(
function(){
$(this).children('ul').hide().fadeIn(500);
},
function () {
$('ul.submenu', this).fadeOut(2000);
});
Fiddle: http://jsfiddle.net/3F7bJ/3/

You had a couple of issues with your scripts and CSS.
Firstly, your CSS had the following rule:
nav ul#main-nav li:hover > ul.submenu {
display: block;
}
This needs to be modified to:
nav ul#main-nav li > ul.submenu.stick {
display: block;
}
This meant that your CSS was controlling the visibility rather than the class 'stick'.
As you mentioned the use of .hover() and .mouseleave() in the script code is incorrect and not required. As at that point you are already in the mouseleave (handlerOut) of the hover.
The below code appears to perform the desired effect you were looking for:
var menuStickTimeoutId;
$('ul#main-nav > li').hover(function () {
var $this = $(this);
clearTimeout(menuStickTimeoutId);
$('#main-nav ul.submenu').removeClass('stick');
$this.find('ul.submenu').addClass('stick');
}, function () {
var $this = $(this);
clearTimeout(menuStickTimeoutId);
menuStickTimeoutId = setTimeout(function () {
$this.find('ul.submenu').removeClass('stick');
}, 2000);
});
Working demo:
http://jsfiddle.net/3F7bJ/2/