3

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 メニューを折りたたむことです。メイン メニューの 1 つにマウスを合わせると、対応する .sub アイテムが展開され、ユーザーが見ることができます。ありがとう！

編集：

私はコメントの1つで素敵なチュートリアルを手に入れることができ、これを思いつきました!

今必要なのは、最初のメニューだけでなく、対応する .main メニューからすべての .sub メニューを表示する方法です。

4

2 に答える 2

9

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';
     }
}
于 2013-04-15T01:31:59.050 に答える
1

私の解決策は、質問の編集で言及されているものと似ていますが、クリックを開始しても、既に開いているリスト項目は再度開きません: 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();
  }
});

パフォーマンスに問題がある場合は、slideUp() と slideDown() の代わりに show() と hide() を使用できます。

于 2014-08-18T08:45:14.000 に答える