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

【问题标题】：How can i make a list menu "collapsible"?如何使列表菜单“可折叠”？
【发布时间】：2013-04-06 23:01:10
【问题描述】：

我的菜单有 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 项目以便用户看到。谢谢！

编辑：

我设法在其中一个 cmets 中获得了一个不错的教程，并想出了 THIS！

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

【问题讨论】：

youtube.com/watch?v=qBh_lMO_SDM 看看这个！
您是否专门寻找 javascript 解决方案？如果愿意，您可以使用 CSS 和对 HTML 进行一些调整来完成此操作。
@dentaku 我设法从上面的视频中获得了一个不错的脚本，我只需要稍微调整一下就可以了。 (:
@auicsc 我使用了那个教程并想出了一些非常简洁的东西，尽管仍然需要一些调整。
@BrunoCharters 很高兴听到这个消息。如果您对直接的 CSS 解决方案感兴趣，请查看 :hover 伪类。 :)

标签： javascript html joomla menu collapsable

【解决方案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');

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

【讨论】：

这是正确的解决方案，先生。谢谢。我标记为正确的，如果你知道我可以做些什么来调整我的 js 以显示所有子菜单。告诉我。
我无法让它工作。奇怪的是。我看起来都不错。你能给我做个 jsfiddle 吗？

【解决方案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()。

【讨论】：