jquery - mismo - mostrar y ocultar menu css

Al no cambiar las opciones del menú superior, ¿cómo puedo ocultar los menús no seleccionados?

Question

Estoy trabajando en este menú, y la última publicación que hice sobre este AQUÍ arrojó una muy buena respuesta que hizo que mi menú funcionara (alternar al hacer clic). Sin embargo, después de trabajar y jugar con él por un tiempo, noté 2 problemas:

(1) Si el mouse sale de un menú determinado, los efectos de desplazamiento del CSS se detienen, pero el menú permanece abierto, lo que hace que se vea funky.

(2) Si hace clic en una opción de menú superior diferente, la primera opción de menú superior no se cierra, lo que provoca que los menús se acumulen entre sí. Esto no funciona

Así que he estado trabajando para tratar de corregir este problema, y ​​de forma predecible rompí el código que antes estaba funcionando. La última vez que pedí ayuda, estaba muy cerca de lo que estaba buscando. Sospecho que lo mismo podría ser cierto aquí. Aquí está mi código, con comentarios agregados. ¿Estoy cerca de donde tengo que estar, o estoy fuera de la base?

Aquí está mi jsFiddle actual

Aquí está el jsFiddle al código jQuery anterior para que pueda ver de lo que estoy hablando

¡EDITAR!

El código del segundo jsFiddle no funciona. Y cuando lo verifiqué, la respuesta jsFiddle de mi última pregunta tampoco está funcionando. ¿Qué? Como es posible, no me he equivocado con eso. . .

EDITAR (2)!

Ted me recordó que tengo que seleccionar jQuery en mi jsFiddle para que funcione. Así que ahora mi código jQuery anterior y el código jQuery actual tienen eso seleccionado. Sin embargo, la respuesta que obtuve la última vez HA seleccionado jQuery y todavía no está funcionando. Aún extraño. . .

¡EDITACIÓN FINAL! Descubrí mucho de esto, pero ahora tengo una nueva pregunta. Está publicado aquí. . .

¿Cómo SECO este script?

HTML

<div id="navbar">
<ul class="nav-tabs">
<li><span>Home</span></li>
<li id="active"><span>Dogs <div class="arrow-down"></div></span>
<ul class="sub-menu">
<li><span>Meet the Breeds<div class="arrow-down"></div></span>
<ul class="drop-menu">
<li><span>Sort A - Z ~ </span>
<ul class="slide-menu">
<li>Breeds A - F</li>
<li>Breeds G - L</li>
<li>Breeds M - R</li>
<li>Breeds S - Z</li>
</ul>
</li>
<li><span>Sort by AKC Group ~</span>
<ul class="slide-menu">
<li>Sporting Group</li>
<li>Working Group</li>
<li>Herding Group</li>
<li>Hound Group</li>
<li>Terrier Group</li>
<li>Non-Sporting Group</li>
<li>Toy Group</li>
</ul>
</li>
<li><span>Sort by Size ~</span>
<ul class="slide-menu">
<li>X-Small (&le 10in)</li>
<li>Small (10in &gt &lt 15in)</li>
<li>Medium (15in &ge &lt 21in)</li>
<li>Large (21in &ge &lt 28in)</li>
<li>X-Large (28in +)</li>
</ul>
</li>
<li><span>Sort by Coat ~</span>
<ul class="slide-menu">
<li>Very Short/Hairless</li>
<li>Short Coat</li>
<li>Medium Coats</li>
<li>Long Coats</li>
<li>Non-Shedding Coats</li>
<li>Curly Coats</li>
</ul>
</li>
<li><span>Sort by Trait ~</span>
<ul class="slide-menu">
<li>Apartment Suitable</li>
<li>Laid Back</li>
<li>Athletic</li>
<li>Protective</li>
<li>Extroverted</li>
<li>Pet Friendly</li>
<li>Cuddle-Buddies</li>
</ul>
</li>
</ul>
</li>
<li><span>Supplies<div class="arrow-down"></div></span>
<ul class="drop-menu">
<li><span>Crates & Kennels</li>
<li><span>Bowls & Dishes</li>
<li><span>Collars & Leashes</li>
<li><span>Toys & Games</li>
<li><span>Grooming</li>
<li><span>Apparal & Accessories</li>
</ul>
</li>
<li><span>Finding a Dog<div class="arrow-down"></div></span></li>
</ul>
</li>
<li><span>Cats<div class="arrow-down"></div></span>
<ul class="sub-menu">
<li><span>Cat Links<div class="arrow-down"></div></span></li>
<li><span>Cat Links<div class="arrow-down"></div></span></li>
<li><span>Cat Links<div class="arrow-down"></div></span></li>
<li><span>Cat Links<div class="arrow-down"></div></span></li>
<li><span>Cat Links<div class="arrow-down"></div></span></li>
<li><span>Cat Links<div class="arrow-down"></div></span></li>
</ul>
</li>
<li><span>Birds<div class="arrow-down"></div></span>
<ul class="sub-menu">
<li><span>Bird Links<div class="arrow-down"></div></span></li>
<li><span>Bird Links<div class="arrow-down"></div></span></li>
<li><span>Bird Links<div class="arrow-down"></div></span></li>
<li><span>Bird Links<div class="arrow-down"></div></span></li>
<li><span>Bird Links<div class="arrow-down"></div></span></li>
<li><span>Bird Links<div class="arrow-down"></div></span></li>
</ul>
</li>
<li><span>Small Mammals<div class="arrow-down"></div></span>
<ul class="sub-menu">
<li><span>Sm.Mammal Links<div class="arrow-down"></div></span></li>
<li><span>Sm.Mammal Links<div class="arrow-down"></div></span></li>
<li><span>Sm.Mammal Links<div class="arrow-down"></div></span></li>
<li><span>Sm.Mammal Links<div class="arrow-down"></div></span></li>
<li><span>Sm.Mammal Links<div class="arrow-down"></div></span></li>
<li><="#"<span>More Links<div class="arrow-down"></div></span></li>
</ul>
</li>
<li><span>Articles<div class="arrow-down"></div></span>
<ul class="sub-menu">
<li><span>Article Links<div class="arrow-down"></div></span></li>
<li><span>Article Links<div class="arrow-down"></div></span></li>
<li><span>Article Links<div class="arrow-down"></div></span></li>
<li><span>Article Links<div class="arrow-down"></div></span></li>
<li><span>Article Links<div class="arrow-down"></div></span></li>
<li><span>Article Links<div class="arrow-down"></div></span></li>
</ul>
</li>
<li><span>Videos<div class="arrow-down"></div></span>
<ul class="sub-menu">
<li><span>Video Links<div class="arrow-down"></div></span></li>
<li><span>Video Links<div class="arrow-down"></div></span></li>
<li><span>Video Links<div class="arrow-down"></div></span></li>
<li><span>Video Links<div class="arrow-down"></div></span></li>
<li><span>Video Links<div class="arrow-down"></div></span></li>
<li><span>Video Links<div class="arrow-down"></div></span></li>
</ul>
</li>
<li><span>Updates<div class="arrow-down"></div></span>
<ul class="sub-menu">
<li><span>More Links<div class="arrow-down"></div></span></li>
<li><span>More Links<div class="arrow-down"></div></span></li>
<li><span>More Links<div class="arrow-down"></div></span></li>
<li><span>More Links<div class="arrow-down"></div></span></li>
<li><span>More Links<div class="arrow-down"></div></span></li>
<li><span>More Links<div class="arrow-down"></div></span></li>
</ul>
</li>
</ul>
</div>

jQuery

$(document).ready(function(){
$(".nav-tabs span").click(function(){
//finds the immediate span child of .nav-tabs with a class of Open
var tab = $("#navbar .nav-tabs > span.open");
//finds all .nav-tabs span children, with or without class of open
var next-tab = $("navbar .nav-tabs > span")
// THIS clicked element and toggles a class of Open
var menu = $(this).toggleClass("open");
// If -THIS- tab is -NOT- the parent of -THIS- menu:
if (!tab.children(this)) {
tab.removeClass("open");
// this next line may not be neccessary . . .
this.parents($next-tab).addClass("open");
}
// Toggles span''s UL sibling (the submenu)
var sub-menu = $menu.siblings("ul").toggle("fast", function(){
// If a different tab is clicked, or any menu closed
// OR if the mouse leaves the 1st .nav-tabs -
// all submenus beneath it close.
if(!$tab.is("open") && !$menu.is("open") && $menu.onMouseOut()){
$sub-menu.find("span + ul").hide();
}
});
});
});