[英]How can I make my menu expand all the subitems?
我有一個包含一些JavaScript代碼的列表菜單,使其崩潰並擴展.onClick
。
雖然我只能讓它顯示1項,因為每次我嘗試新的解決方案,如for
循環或case
我無法讓它工作。
這是我目前的代碼:
<ul id="navigation">
<li class="main"><a>Diagonóstico</a></li>
<li class="sub"><a href="javascript:void(0);" class="sub_di1"> › Grátis (na compra de qualquer serviço) </a></li>
<li class="main"><a>Hardware</a></li>
<li class="sub"><a href="javascript:void(0);" class="sub_ha1"> › Instalação/Configuração de Componentes</a></li>
<li class="sub"><a href="javascript:void(0);" class="sub_ha2"> › Instalação/Configuração de Periféricos </a></li>
<li class="sub"><a href="javascript:void(0);" class="sub_ha3"> › Limpeza interna/externa </a></li>
<li class="sub"><a href="javascript:void(0);" class="sub_ha4"> › Cooling Pack </a></li>
<li class="sub"><a href="javascript:void(0);" class="sub_ha5"> › Performance Pack </a></li>
<li class="main"><a>Software</a></li>
<li class="sub"><a href="javascript:void(0);" class="sub_so1"> › Actualização de Sistema Operativo </a></li>
<li class="sub"><a href="javascript:void(0);" class="sub_so2"> › Instalação de Sistema Operativo </a></li>
<li class="sub"><a href="javascript:void(0);" class="sub_so3"> › Instalação de Drivers e Aplicações </a></li>
<li class="sub"><a href="javascript:void(0);" class="sub_so4"> › Configurações de internet e redes wireless </a></li>
<li class="sub"><a href="javascript:void(0);" class="sub_so5"> › Legalize o seu PC </a></li>
<li class="main"><a>Backup</a></li>
<li class="sub"><a href="javascript:void(0);" class="sub_ba1"> › Backup de dados até 4GB </a></li>
<li class="sub"><a href="javascript:void(0);" class="sub_ba2"> › Backup and Go </a></li>
<li class="sub"><a href="javascript:void(0);" class="sub_ba3"> › Suportes Danificados </a></li>
<li class="sub"><a href="javascript:void(0);" class="sub_ba4"> › Recuperação de dados sem intervenção física </a></li>
<li class="main"><a>Segurança</a></li>
<li class="sub"><a href="javascript:void(0);" class="sub_se1"> › Remoção de Vírus e Spyware </a></li>
<li class="sub"><a href="javascript:void(0);" class="sub_se2"> › Instalação de anti-vírus </a></li>
<li class="sub"><a href="javascript:void(0);" class="sub_se3"> › Configurações de Controlo Parental </a></li>
</ul>
$(function () {
$("li.sub:not(:first)").hide();
$("li.main a").click(function () {
$("li.sub").slideUp("fast");
$(this).parent("li.main").next("li.sub").slideDown("slow");
});
});
這是jsFiddle 。
我正在考慮一個for
循環,它貫穿每個子菜單類別,例如:
for(var i=1; i<5; i++) {
$(this).parent("li.main").next("li.sub_ha" + i).slideDown("slow");
}
然后為每個主菜單執行此操作,為每個主菜單提供類menu1,menu2,menu3
等。
這應該這樣做:
$(this).parent().parent().find("li.sub").slideDown("slow");
next
只選擇所選元素的下一個兄弟,你可以使用nextUntil
。
$(this).parent().nextUntil("li.main").slideDown("slow");
$(function() {
var $subitems = $("li.sub");
$subitems.not(':first').hide();
$("li.main a").click(function() {
var $targets = $(this).parent().nextUntil("li.main").slideDown("slow");
$subitems.not($targets).slideUp("fast");
});
});
在語義上這樣做會更好。 如果你想說這門課程,我會建議給每組兒童用品自己上課。 您可以搜索子項的類,然后使用該類查找子組中的所有內容,然后在該組上運行.slideDown()
方法。
我做了一個改進版的小提琴 ,展示了如何做到這一點。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.