播放"peek-a-boo"与jQuery菜单 [英] Playing "peek-a-boo" with jQuery Menu
问题描述
因此,我正在尝试使用此菜单进行扩展/收缩.在用JavaScript争取了2周的时间(业余时间)之后,我决定尝试使用jQuery解决此问题.这么简单!好吧,有点.我设法将4级菜单的2级打开,但是当我尝试打开3级时,它滑入视图,并立即再次滑出.就像和我一起玩捉迷藏"一样.
So I'm working on this menu that I'm trying to expand/contract on click. After fighting for 2 weeks (in my spare time) with javascript, I've decided to try and tackle this with jQuery. It's so much easier! Well, kinda. I managed to make the 2nd level of my 4 level menu open, but when I try to open the 3rd level, it slides into view, and immediately slides out again. Like it's playing "peek-a-boo" with me.
代码逻辑在第二层上起作用,因此从理论上讲它应该在所有层上起作用,对吗?如何调整此代码,以使切换生效?
The code logic works on the 2nd level, so in theory it should work for all levels, right? How do I tweak this code so that my toggles work?
HTML
<ul id="main-menu">
<li class="main-tabs"><span>Home</span>
<ul id="sub-menu">
<li class="sub-tabs"><span>Sub-Menu Tabs</span>
<ul id="drop-menu">
<li class="drop-tabs"><span>Drop Menu Tabs</span>
<ul id="slide-menu">
<li class="slide-tabs"><span>Slide Menu Tabs</span></li>
<li class="slide-tabs"><span>Slide Menu Tabs</span></li>
<li class="slide-tabs"><span>Slide Menu Tabs</span></li>
<li class="slide-tabs"><span>Slide Menu Tabs</span></li>
<li class="slide-tabs"><span>Slide Menu Tabs</span></li>
</ul> <!-- End Slide Menu -->
</li> <!-- End Drop Tab -->
</ul> <!-- End Drop Menu -->
</li> <!-- End Sub Tabs -->
</ul> <!-- End Sub Menu -->
</li> <!-- End Main Tabs -->
</ul> <!-- End Main Menu -->
jQuery
$(document).ready(function(){
$(".main-tabs span").click(function(){
$(this).siblings("ul").slideToggle("fast");
});
});
$(document).ready(function(){
$(".sub-tabs span").click(function(){
$(this).siblings("ul").slideToggle("fast");
});
});
$(document).ready(function(){
$(".drop-tabs span").click(function(){
$(this).siblings("ul").slideToggle("fast");
});
});
CSS
#sub-menu, #drop-menu, #slide-menu {
display: none;
}
.main-tabs, .sub-tabs, .drop-tabs, .slide-tabs {
list-style-type: none;
cursor: pointer;
}
我本来只是使用$(".main-tabs").click(function()
来完成此操作的,但是当我尝试单击子菜单链接时,由于它仍位于LI的第一组中,因此菜单会再次折叠,所以我这样做单击第一个LI内的跨度,然后切换为UL同级.
I originally did this using just $(".main-tabs").click(function()
, but then when I tried to click on the sub-menu links, since it was still inside the 1st set of LI's, the menu would collapse again, so I made it so you click on the span inside the 1st LI, and then you toggle it's UL sibling.
编辑-
抱歉,这是 jsFiddle .
推荐答案
您只需要第一个脚本
$(document).ready(function() {
$(".main-tabs span").click(function() {
$(this).siblings("ul").slideToggle("fast");
});
});
因为它将在其下面的任何级别定位span
个元素.
As it will target span
elements at any level below it.
您当前的代码在第二个菜单中有两个处理程序,在第三级中有3个处理程序. (也适用于所有以前的)
You current code had two handlers for the second menu and 3 for the 3rd level. (as all previous applied also)
因此,在您的第二个级别中,第一个处理程序将其打开,第二个处理程序将其关闭.
So in your second level the first handler toggled it on, and the second toggled it off.
$(document).ready(function() {
$(".main-tabs span").click(function() {
$(this).siblings("ul").slideToggle("fast");
});
});
#sub-menu,
#drop-menu,
#slide-menu {
display: none;
}
.main-tabs,
.sub-tabs,
.drop-tabs,
.slide-tabs {
list-style-type: none;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id="main-menu">
<li class="main-tabs"><span>Home</span>
<ul id="sub-menu">
<li class="sub-tabs"><span>Sub-Menu Tabs</span>
<ul id="drop-menu">
<li class="drop-tabs"><span>Drop Menu Tabs</span>
<ul id="slide-menu">
<li class="slide-tabs"><span>Slide Menu Tabs</span>
</li>
<li class="slide-tabs"><span>Slide Menu Tabs</span>
</li>
<li class="slide-tabs"><span>Slide Menu Tabs</span>
</li>
<li class="slide-tabs"><span>Slide Menu Tabs</span>
</li>
<li class="slide-tabs"><span>Slide Menu Tabs</span>
</li>
</ul>
<!-- End Slide Menu -->
</li>
<!-- End Drop Tab -->
</ul>
<!-- End Drop Menu -->
</li>
<!-- End Sub Tabs -->
</ul>
<!-- End Sub Menu -->
</li>
<!-- End Main Tabs -->
</ul>
<!-- End Main Menu -->
这篇关于播放"peek-a-boo"与jQuery菜单的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!