问题
I'm working on this menu, and the last post I made about this HERE turned up a very good answer that got my menu working (toggling on click). However, after working and playing with it for a little while, I noticed 2 problems:
(1) If the mouse leaves any given menu, the CSS hover effects stop, but the menu stays open, which causes it to look funky.
(2) If you click on a different top-menu option, the 1st top-menu option doesn't close, which causes the menus to stack on one another. This doesn't work.
So I've been working to try and correct this issue, and predictably broke the code that was kinda working before. Last time I asked for help, I was really close to what I was aiming for. I suspect the same might be true here. Here is my code, with comments added. Am I anywhere near where I need to be, or am I way off base?
Here is my current jsFiddle
Here is the jsFiddle to the previous jQuery code so you can see what I'm talking about
EDIT!
The code to the 2nd jsFiddle isn't working. And when I checked, the jsFiddle answer from my last question isn't working either now. What? How is that possible, I haven't messed with it . . .
EDIT(2)!
Ted reminded me that I have to select jQuery in my jsFiddle for it to work. So now my previous jQuery code and current jQuery code have that selected. However, answer I got last time DOES have jQuery selected and still isn't working. Still weird. . .
FINAL EDIT! I figured out a lot of this myself, but now I have a new question. It's posted here . . .
How do I DRY up this 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 > < 15in)</li>
<li>Medium (15in &ge < 21in)</li>
<li>Large (21in &ge < 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();
}
});
});
});
来源：https://stackoverflow.com/questions/30194278/not-toggling-top-menu-options-how-do-i-hide-non-selected-menus