Develop Reference

Make parent link unclickable in submenu toggle

I am trying to make a sub-menu toggle on mobile but it keeps on redirecting to the parent menu link and adding event.preventDefault(); making entire sub-menu links unclickable. Any idea how to make only first .has-childern a link unclickable?
Markup
<div class="menu-container">
<ul class="nav-menu">
<li class="menu item"> Home </li>
<li class="menu-item has-childern"> About
<ul class="submenu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</li>
<li class="menu-item has-childern"> Services
<ul class="submenu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</li>
<li class="menu item"> Contact </li>
</ul>
</div>
jQuery
jQuery(document).ready(function(){
jQuery('.menu-container .submenu').hide();
jQuery('.menu-container .has-childern a').click(function() {
event.preventDefault();
jQuery(this).parent().children('.submenu').toggle();
});
});
JsFiddle https://jsfiddle.net/p5fLsvcq/

You code affect all nested children instead just direct child
use '>' for select just a direct first level child in selector:
jQuery('.menu-container .has-childern > a').click(/*...*/)

Collapse/Un-collapse all menu items. - HTML/JS/CSS/Bootstrap3

The left is what my code does, the right is what I want it to do. When clicking on a menu item it collapses fine but I want to be able to un-collapse them after and be able to collapse all of them if I wish.
$('.nav-second').on('show.bs.collapse', function () {
$('.nav-second.in').collapse('hide');
});
html
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li class="sidebar-brand"></li>
<li>
<i class="material-icons">home</i>
</li>
<li>
Overall
<ul id="overall" class="nav-second collapse">
<li>Item 1</li>
<li>Item 2</li>
</ul>
</li>
<li>
Dashboard
<ul id="dashboard" class="nav-second collapse">
<li>Item 1</li>
<li>Item 2</li>
</ul>
</li>
<li>
Service
<ul id="service" class="nav-second collapse">
<li>Item 1</li>
<li>Item 2</li>
</ul>
</li>
<li>
</ul>

If you need this approach just remove that jQuery code.
I mean this one:
$('.nav-second').on('show.bs.collapse', function () {
$('.nav-second.in').collapse('hide');
});

DOM traversal from a span element inside an anchor to list

I can't figure how to travers the DOM, starting from <span class = "open-menu-link">, I want to reach <ul class="sub-menu"> .
The script
<script> $('.open-menu-link').click(function(e){
alert(e.currentTarget);
});
</script>
return a Object HTMLSpanElement, but if I code e.currentTarget.parentNode; it returns http://localhost/mysite/home.php. Doing e.currentTarget.children; I get Object HTMLCollection, but if I try e.currentTarget.children[1] I get undefined... so how can I reach <ul class="sub-menu">?
The snippet is the follow:
<ul class="menu">
<li>Work</li>
<li class="menu-item-has-children">Haschildren <span class = "open-menu-link">+</span>
<ul class="sub-menu">
<li>Child 1</li>
<li>Child 2</li>
<li>Child 3</li>
</ul>
</li>
<li>Careers</li>
<li>Contact</li>
</ul>

$(function() {
$('.open-menu-link').click(function(e){
console.log(e.target.parentNode.nextElementSibling);
console.log(e.target.parentNode.parentNode.children[1]);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="menu">
<li>Work</li>
<li class="menu-item-has-children">
Haschildren <span class="open-menu-link">+</span>
<ul class="sub-menu">
<li>Child 1</li>
<li>Child 2</li>
<li>Child 3</li>
</ul>
</li>
<li>Careers</li>
<li>Contact</li>
</ul>
There are couple of options:
$('.open-menu-link').click(function(e){
console.log(e.target.parentNode.nextElementSibling);
console.log(e.target.parentNode.parentNode.children[1]);
});

The <span class = "open-menu-link"> in your code has only one child i.e text node + this is the reason why e.currentTarget.children[1] is giving you undefined.
Coming to the dom traversal, you should start with node <li class="menu-item-has-children"> . Well that is what I can infer from your question.

You need to use preventDefault() because you'r class is a link. By clicking, it'll redirect you to the link.
$('.open-menu-link').click(function(e) {
console.log($(this).parent().next())
e.preventDefault()
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="menu">
<li>Work
</li>
<li class="menu-item-has-children">
Haschildren <span class = "open-menu-link">+</span>
<ul class="sub-menu">
<li>Child 1
</li>
<li>Child 2
</li>
<li>Child 3
</li>
</ul>
</li>
<li>Careers
</li>
<li>Contact
</li>
</ul>

Mega Menu built from scratch - Jquery reSizing

I am building a mega menu and would like for it to be at lightweight as possible.
HTML:
<div id="menu-wrapper">
<ul class="nav">
<li>Category A
<div class="block">
<h3>Category A</h3>
<div class="nav-column">
<ul>
<li>Sub-Category
<div class="sub-column">
<ul>
<li>Link #1</li>
<li>Link #2</li>
<li>Link #3</li>
</ul>
</div>
</li>
<li>Sub-Category
<div class="sub-column">
<ul>
<li>Link #1</li>
<li>Link #2</li>
<li>Link #3</li>
<li>Link #4</li>
<li>Link #5</li>
</ul>
</div>
</li>
<li>Sub-Category
<div class="sub-column">
<ul>
<li>Link #1</li>
<li>Link #2</li>
<li>Link #3</li>
<li>Link #4</li>
</ul>
</div>
</li>
</ul>
</div>
<div class="home">
<h3>Featured Products</h3>
<div class="featured">
<p>Lorum Ipsum...</p>
</div>
</div>
</div>
</li>
<li>Category B
<div class="block">
<h3>Category B</h3>
<div class="nav-column">
<ul>
<li>Sub-Category
<div class="sub-column">
<ul>
<li>Link #1</li>
<li>Link #2</li>
<li>Link #3</li>
</ul>
</div>
</li>
<li>Sub-Category
<div class="sub-column">
<ul>
<li>Link #1</li>
<li>Link #2</li>
<li>Link #3</li>
<li>Link #4</li>
<li>Link #5</li>
</ul>
</div>
</li>
<li>Sub-Category
<div class="sub-column">
<ul>
<li>Link #1</li>
<li>Link #2</li>
<li>Link #3</li>
<li>Link #4</li>
</ul>
</div>
</li>
</ul>
</div>
<div class="home">
<h3>Featured Products</h3>
<div class="featured">
<p>Lorum Ipsum...</p>
</div>
</div>
</div>
</li>
<li>Category C
<div class="block">
<h3>Category C</h3>
<div class="nav-column">
<ul>
<li>Sub-Category
<div class="sub-column">
<ul>
<li>Link #1</li>
<li>Link #2</li>
<li>Link #3</li>
</ul>
</div>
</li>
<li>Sub-Category
<div class="sub-column">
<ul>
<li>Link #1</li>
<li>Link #2</li>
<li>Link #3</li>
<li>Link #4</li>
<li>Link #5</li>
</ul>
</div>
</li>
<li>Sub-Category
<div class="sub-column">
<ul>
<li>Link #1</li>
<li>Link #2</li>
<li>Link #3</li>
<li>Link #4</li>
</ul>
</div>
</li>
</ul>
</div>
<div class="home">
<h3>Featured Products</h3>
<div class="featured">
<p>Lorum Ipsum...</p>
</div>
</div>
</div>
</li>
</ul>
</div>
Of course there are many more nested onordered lists, but that is your basic heirarchy.
What I'm trying to do is create a jQuery function that will perform a height check:
When you HOVER on a .nav > li > a, the jQuery checks the heights of ALL .sub-columns AND .home that fall under it, and ONLY THOSE, when you roll off, the height check resets, so you can check the next .nav > li > a.
I was recently pointed to THIS possible solution, but it was checking ALL of the .sub-columns and not just the .sub-columns that fall under the .nav > li > a I was hovering over.
I feel that I'm 90% of the way there, but I'm just not pointing or reference the correct parent-child-sibling elements to make it work properly.
Thanks in advance.

If i understood right you want something like the following.
$(".nav > li > a").hover(function(){
var subColumns = $(this).next().find(".sub-column");
});
The next() function gets the div block(nav-column) which contains all the sub-columns for that link. Then i did a find() since it's several elements nested under that.
Here's a fiddle that alerts out the number of sub-columns it finds.

Don't slideToggle all

I have a vertical sliding menu, that looks like this:
<ul class="menu">
<li>link</li>
<li>link</li>
<li class="more">link with submenu</li>
<ul class="submenu">
<li>sub link 1</li>
<li>sub link 2</li>
</ul>
<li class="more">link with submenu</li>
<ul class="submenu">
<li>sub link 1</li>
<li>sub link 2</li>
</ul>
<li>link</li>
<li>link</li>
</ul>
the jQuery is like this:
jQuery(document).ready(function($) {
$(".more").click(function() {
$(this).parent().children(".submenu").slideToggle(500); });
});
My problem is, when I click on a ".more", every ".submenu" is being slideToggle (Both opens)
How can I do, so it is only the correct submenu that is being slidetoggled?
Thank you.

Remove the call to .parent(). Also, your .submenu should be nested within the <li> to which it belongs, leaving you with the following jQuery:
$("li.more").on("click", function() {
$("ul.submenu", this).slideToggle(500);
});
And this markup:
<ul class="menu">
<li>link</li>
<li>link</li>
<li class="more">
link with submenu
<ul class="submenu">
<li>sub link 1</li>
<li>sub link 2</li>
</ul>
</li>
<li class="more">
link with submenu
<ul class="submenu">
<li>sub link 1</li>
<li>sub link 2</li>
</ul>
</li>
<li>link</li>
<li>link</li>
</ul>

this one?
$(this).next().eq(0).slideToggle(500); });