Question

我在这个菜单上工作，我发表的关于这个HERE的最后一篇文章找到了一个非常好的答案，让我的菜单工作（点击切换）。然而，在工作和玩了一会儿之后，我发现了两个问题：

（1）如果鼠标离开任何给定的菜单，CSS悬停效果会停止，但菜单会保持打开状态，这会使其看起来很时髦。

（2）如果您点击其他顶级菜单选项，则第一个顶级菜单选项不会关闭，这会导致菜单相互堆叠。这不起作用。

所以我一直在努力尝试纠正这个问题，并且可以预见地打破了以前有点工作的代码。上次我求助时，我非常接近我的目标。我怀疑在这里可能也是如此。这是我的代码，添加了评论。我在附近我需要的地方，还是我离开基地？

这是我目前的jsFiddle

以下是前一个jQuery代码的jsFiddle，以便您可以看到我在谈论的内容

修改<！/强>

第二个jsFiddle的代码不起作用。当我查看时，我上一个问题的jsFiddle答案现在都没有工作。什么？怎么可能，我还没有弄乱它。。

修改（2）！

Ted提醒我，我必须在我的jsFiddle中选择jQuery才能工作。所以现在我以前的jQuery代码和当前的jQuery代码已经选中了。但是，我上次回答的问题是选择了jQuery并且仍然没有工作。仍然很奇怪。。

最终编辑！我自己想出了很多，但现在我有了一个新问题。它发布在这里。。

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 &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(); } }); }); });

不切换顶部菜单选项，如何隐藏未选择的菜单？

0 个答案: