Question

我有一个包含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>

请查看 full code 。

正如您在jsFiddle中看到的，所有菜单项在单击时都会在另一个div中显示一些文本。我把它放在那里以防万一需要进一步的javascript帮助。我想要的是让所有.sub菜单折叠，当我 mouseover 其中一个主菜单时，它会扩展相应的.sub项目，以便用户可以看到。谢谢！

编辑：

我设法在其中一条评论中获得了一个很好的教程，并提出了 THIS ！

我现在需要的是一种从相应的.main菜单中显示所有.sub菜单的方法，而不仅仅是第一个菜单。

Answer 1

仅使用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');

JS没有Jquery

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';
     }
}

Answer 2

我的解决方案类似于问题编辑中提到的解决方案，但点击时点击时，已打开的列表项不会重新打开：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（）。

如何使列表菜单“可折叠”？

2 个答案: