如何烘干此脚本? [英] How do I DRY up this script?
问题描述
我一直在插入此导航代码，终于在菜单的第一层开始工作了.耶！但是我注意到我的代码仅适用于第一层.好吧，有点.当您单击其他菜单时，打开的菜单应该会关闭.它适用于我的顶级导航选项，但不适用于我的子菜单选项.我很想复制/粘贴代码，以便所有功能都适用于所有级别，但是我知道编码中的一个大规则是不要重复自己"(DRY).因此，有人可以看看这一点，看看是否有一种方法可以将我的所有子菜单应用第一个If/Else语句的规则? (子菜单，下拉菜单，幻灯片菜单).
I have been plugging away at this navigation code, and I finally got the 1st layers of my menu to work. Yay! But I've noticed that my code ONLY works on the 1st layers. Well, kinda. Open menus are supposed to close when you click on a different menu. It works for my top-level nav options, but not my sub-menu options. I'm tempted to just copy/paste the code so that everything works for all levels, but I know one big rule in coding is Don't Repeat Yourself (DRY). So could someone have a look at this and see if there's a way I could apply the rules of the 1st If/Else statement to all my submenus? (sub-menu, drop-menu, slide-menu).
此外，如果我的顶级导航开始自动换行，当您单击第二行上的链接之一时，子菜单将显示OVER顶级链接，几乎无法关闭.有办法解决吗?
Also, if my top-level nav starts to wrap, when you click on one of the links on the 2nd line, the sub-menu will display OVER the top-level link, making it almost impossible to close. Is there a way to fix that?
这是我的 jsFiddle
jQuery
$(document).ready(function(){
$(".nav-tabs span").click(function(){
var activeTab = $(".nav-tabs > li span.open");
var submenu = $(this).siblings("ul");
var thisParent = $(this).closest("ul");
if (thisParent.hasClass("nav-tabs")){
if (!$(this).is(activeTab)){
/*
alert("this link was not active yet");
*/
activeTab.siblings("ul").slideUp();
submenu.find("span+ul").hide();
activeTab.removeClass("open");
$(this).addClass("open");
submenu.slideDown();
} else {
/*
alert("this link is already active");
*/
submenu.slideUp();
submenu.find("span+ul").hide();
$(this).removeClass("open");
}
} else {
$(this).toggleClass("open");
submenu.slideToggle("fast", function(){
if (!$(this).is(".open")){
submenu.find("span+ul").removeClass("open").hide();
}
});
}
});
});
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>Sm.Mammal 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>
jsFiddle中包含的
CSS
CSS included on jsFiddle
推荐答案
哈！我能够自己找出答案！
Ha! I was able to figure out an answer to this on my own!
我在此处定义了变量的地方:
Where I have the variables defined here:
var activeTab = $(".nav-tabs > li span.open");
var submenu = $(this).siblings("ul");
var thisParent = $(this).closest("ul");
我要做的就是将activeTab变量更改为此:
All I had to do was change the activeTab variable to this:
var thisParent = $(this).closest("ul");
var activeTab = thisParent.children().children("span.open");
var submenu = $(this).siblings("ul");
完美运行！现在，此代码可完美地适用于所有菜单，而我不必重复自己！
Works perfectly! And now this code works perfectly for all menus and I don't have to repeat myself!
这篇关于如何烘干此脚本?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
