[英]How can i make a list menu “collapsible”?
我有一個包含4個主要項目的菜單,每個項目有3到5個子項目。
<ul id="navigation">
<li><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><a>Hardware</a>
</li>
<li class="sub"><a href="javascript:void(0);" class="sub_ha1"> › Instalação/Configuração de Componentes</a>
請檢查完整的代碼 。
正如您在jsFiddle中看到的,所有菜單項在單擊時都會在另一個div中顯示一些文本。 我把它放在那里以防萬一需要進一步的javascript幫助。 我想要的是讓所有.sub菜單折疊,當我將鼠標懸停在其中一個主菜單上時,它會擴展相應的.sub項目以便用戶可以看到。 謝謝!
編輯:
我設法在其中一條評論中得到了一個很好的教程,並提出了這個 !
我現在需要的是一種方法來顯示相應的.main菜單中的所有.sub菜單,而不是僅顯示第一個菜單。
僅使用HTML和CSS。
HTML
<ul id="menu">
<li><a href="SOME_LINK">Some menu without sub-menu</a></li>
<li><a href="SOME_LINK2">Some menu without sub-menu 2 </a></li>
<li>Some menu WITH sub-menu
<ul>
<li><a href="SOME_LINK">Some sub-menu</a></li>
<li><a href="SOME_LINK">Some sub-menu 2</a></li>
</ul>
</li>
<li><a href="SOME_LINK3">Some menu without sub-menu 3</a></li>
</ul>
CSS
ul>li>ul{display:none}
ul>li:hover>ul, ul>li:selected>ul{display:block}
JS(jQuery)打開所有子菜單
$('#menu li>ul').parent().addClass('selected');
沒有Jquery的JS
var menus = document.getElementById('menu').getElementsByTagName('li')
for(var row in menus){
if(typeof menus[row] == 'object' && menus[row].getElementsByTagName('ul').length > 0){
menus[row].getElementsByTagName('ul')[0].className = 'selected';
}
}
我的解決方案類似於問題編輯中提到的解決方案,但是當點擊時,已經打開的列表項不會重新打開: http : //jsfiddle.net/g5oc0uoq/
$('.content').hide();
$('.listelement').on('click', function(){
if(!($(this).children('.content').is(':visible'))){
$('.content').slideUp();
$(this).children('.content').slideDown();
} else {
$('.content').slideUp();
}
});
如果遇到性能問題,可以使用show()和hide()代替slideUp()和slideDown()。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.