1

ホバーではなくクリックでアクティブになるドロップダウンメニューを作成しようとしています。これまでのところ、少しのJavaScriptでオンクリックが機能していますが、サブメニューがうまく表示され、別のメニューをクリックすると他のサブメニューが非表示になりますが、親がクリックされた場合にサブメニューを非表示にする方法がわかりません。

EG このJS フィドル では、「親 1」をクリックしてその子を表示できます。「親 2」をクリックすると、親 1 の子が非表示になり、親 2 の子が表示されます。しかし、親 1 の子が表示されている場合は、親 1 をもう一度クリックして非表示にしたい (または、子以外のどこでもよい)。

各親メニューとサブメニューに個別のクラスまたは ID が与えられている例を見てきました。cmsで動作する必要があるため、これは避けたいと思います。

ここに私が持っている基本的なコードがあります

HTML:

<div>
<ul>
    <li><a href="#">Parent 1</a>
        <ul>
            <li><a href="#">Parent 1 &raquo; Child 1</a></li>
            <li><a href="#">Parent 1 &raquo; Child 1</a></li>
            <li><a href="#">Parent 1 &raquo; Child 1</a></li>
        </ul>
    </li>
    <li><a href="#">Parent 2</a>
        <ul>
            <li><a href="#">Parent 2 &raquo; Child 2</a></li>
            <li><a href="#">Parent 2 &raquo; Child 2</a></li>
            <li><a href="#">Parent 2 &raquo; Child 2</a></li>
        </ul>
    </li>
    <li><a href="#">Parent 3</a>
        <ul>
            <li><a href="#">Parent 3 &raquo; Child 3</a></li>
            <li><a href="#">Parent 3 &raquo; Child 3</a></li>
            <li><a href="#">Parent 3 &raquo; Child 3</a></li>
        </ul>
    </li>
</ul>

ジャバスクリプト：

$(document).ready(function () {
    $("li").click(function () {
        $('li > ul').hide();
        $(this).children("ul").toggle();
    });
});

CSS はおそらく必要ありませんが、必要に応じて調整します

4

3 に答える 3

2

このフィドルをチェックしてください

http://jsfiddle.net/Kritika/SZwTg/1/

               $(document).ready(function () {
                      $("li").click(function () {
                          $('li > ul').not($(this).children("ul")).hide();
                          $(this).children("ul").toggle();
                             });
                        });

また 

                $(document).ready(function () {
                     $("li").click(function () {
                         var submenu=$(this).children("ul");
                         $('li > ul').not(submenu).hide();
                         submenu.toggle();
                         });
                    });

「親 1」をクリックするとその子が表示され、「親 2」をクリックすると親 1 の子が非表示になり、親 2 の子が表示されます。親 1 の子が表示されている場合は、親 1 をもう一度クリックして非表示にすることができます。

于 2013-06-30T08:01:17.433 に答える