We Keep Coding

Replicating a select element with a checkbox ul (jQuery)

I'm trying to transform a fieldset with one legend and one UL of checkboxes/radio as a select html element. I know, it sounds bad and doesn't really make sense, but let's just say I have to do it.
I have a jsfiddle https://jsfiddle.net/demj49st/
The problem is that I have some issues replicating the click behavior of the select element. I don't find the right selector to make it so a click on a checkbox wont make the fake select box disappear.
(function($) {
$(document).ready(function() {
$('fieldset legend').on('click', function() {
var $this = $(this);
$this.toggleClass('active');
$this.next().toggleClass('visible');
})
$(document).on('click', function (e) {
if($('ul').hasClass('visible') && !$('fieldset legend').is(e.target)) {
$('ul').removeClass('visible');
$('legend').removeClass('active');
}
});
})
})(jQuery);

$(document).ready(function() {
$('fieldset legend').on('click', function() {
var $this = $(this);
$this.toggleClass('active');
$this.next().toggleClass('visible');
});
$(document).on('click', function (e) {
if (!$("fieldset > ul , fieldset > legend").is(e.target) // if the target of the click isn't the container...
&& $("fieldset > ul , fieldset > legend").has(e.target).length === 0) // ... nor a descendant of the container
{
$('fieldset > ul').removeClass('visible');
}
});
});
DEMO

Mouseleave triggering when leaving grandparent div

I'm having a bit of trouble with a dropdown menu that triggers fadeOut as soon as the mouse leaves the grandparent div, I've searched this problem to death and have yet to find an elegant solution. Here is my code : link
var main = function() {
$('nav').mouseenter(function() {
$('ul li ul').fadeIn('400');
});
$('nav ul li').mouseleave(function(){
$('ul li ul').fadeOut('400');
});
}
$(document).ready(main);

DEMO: MY FIDDLE
You need to specify what element(s) you are trying to attach the event to. By adding '>' youre forcing to only attach the event to that element's children. Try this:
var main = function() {
$('nav').mouseenter(function() {
$(this).find('ul').fadeIn('400');
});
$('nav>ul>li').mouseleave(function() {
$(this).find('ul').fadeOut('400');
});
};

FIDDLE
$(this).find('ul').fadeOut('400');
is correct as $('ul>li>ul').fadeOut('400'); Could not target specific (current) li.
Use following hierarchical flow of TAGS
var main = function() {
$('nav').mouseenter(function() {
$('ul li ul').fadeIn('400');
});
$('nav ul li').mouseleave(function() {
$(this).find('ul').fadeOut('400');
});
};

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

Get sub menu to stay down we click inside subb menu

How can I do so that the menu does not ride up when I click inside subbmenyn?
(Subbmenu will go up when you click on the main link or outside.)
Can it be done without javascript?
Then the menu goes over and works with muse over if you do not have javascript enabled.
FIDDLE
CODE:
$('.nav > ul').toggleClass('no-js js');
$('.nav .js ul').hide();
$(document).on("click", function(e) {
var $elem = $(e.target);
if ($elem.hasClass('clicker')) {
$('.nav .js ul').not($elem.next('ul')).hide();
$elem.next("ul").slideToggle();
} else {
$('.nav .js ul').hide();
}
})

Simply change the else to check that the clicked element isn't in that container, and that it's not the container.
Though you have several elements with the same Id, you should change them to a class
<div class="contentHolder">
so your jQuery would then be
else if (!$($elem).parents('.contentHolder').length && !$elem.hasClass('contentHolder')) {
And you'll need to update the CSS #contentHolder to .contentHolder
http://jsfiddle.net/6ddvq/5/

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/