Navigation with nested lists, slideToggle, JQuery

Hello All,

this problem is swallowing up my days, so I’d much very appreciate some help from anyone who is willing to point me in the right direction. I’m not finding much documentation for this, oddly.

I’m trying to make a drop-down-menu with slideToggle for a responsive nav bar with nested lists, so two slideToggles within a slideToggle, that are independently clickable.

Below is the jQuery solution that makes the most sense, but it ain’t workin for me:
html:

<nav role="navigation" itemscope itemtype="http://schema.org/SiteNavigationElement">
						<div class="toggleNav drop-down-menu"><a href="#">Menu <span class="hamburger">☰</span></a></div>

						<ul id="menu-menu" class="nav top-nav cf"><li id="menu-item-125" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-125"><a href="#">Link</a></li>
<li id="menu-item-45" class="toggleNav menu-item menu-item-type-post_type menu-item-object-page current-page-ancestor current-menu-ancestor current-menu-parent current-page-parent current_page_parent current_page_ancestor menu-item-has-children menu-item-45"><a href="#">Link</a>
<ul class="sub-menu">
	<li id="menu-item-61" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-16 current_page_item menu-item-61"><a href="#">Link</a></li>
	<li id="menu-item-60" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-60"><a href="#">Link</a></li>
	<li id="menu-item-59" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-59"><a href="#">Link</a></li>
	<li id="menu-item-58" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-58"><a href="#">Link</a></li>
	<li id="menu-item-57" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-57"><a href="#">Link</a></li>
	<li id="menu-item-56" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-56"><a href="#">Link</a></li>
	<li id="menu-item-55" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-55"><a href="#">Link</a></li>
	<li id="menu-item-54" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-54"><a href="#">Link</a></li>
</ul>
</li>
<li id="menu-item-46" class="toggleNav menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-46"><a href="#">Link</a>
<ul class="sub-menu">
	<li id="menu-item-53" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-53"><a href="#">Link</a></li>
	<li id="menu-item-52" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-52"><a href="#">Link</a></li>
	<li id="menu-item-51" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-51"><a href="#">Link</a></li>
	<li id="menu-item-50" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-50"><a href="#">Link</a></li>
	<li id="menu-item-49" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-49"><a href="#">Link</a></li>
</ul>
</li>
<li id="menu-item-47" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-47"><a href="#">Link</a></li>
<li id="menu-item-48" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-48"><a href="#">Link</a></li>
</ul>
</nav>

css

.drop-down-menu {
	display: inline-block;
	background: $link-background;
}
.toggleNav {
    display: block;
}
.nav > li:nth-child(2) > a:after, .nav > li:nth-child(3) > a:after {
	content: "\2630";
	font-size: 1.1rem;
	margin-top: -4px;
	padding-left: 5px;
}
.hamburger {
	font-size: 1.1rem;
}
.sub-menu {
	display: none;
}

jQuery

jQuery(function () {
    jQuery('.toggleNav').children('ul').hide();
    jQuery('.toggleNav').on('click', function (event) {
        jQuery(this).children('ul').stop().slideToggle();
        jQuery(this).toggleClass("open");
        event.stopPropagation();
    });
});