0

ここから入手したjQueryを利用したCSS3メニューシステムがあります（http://tympanus.net/codrops/2013/04/19/responsive-multi-level-menu/）私はこの印象的なメニューを私の一部として使用していますサイトナビゲーションですが、問題が発生しました。リンクがたくさんあるので、これらのメニューを複数表示したいです。

jQuery コードは次のとおりです (1 つではなく 2 つのメニューを使用していることを示す #dl-menu2 に注意してください)。

        <script>
        $(function() {
            $( '#dl-menu' ).dlmenu({
                animationClasses : { classin : 'dl-animate-in-2', classout : 'dl-animate-out-2' }
            });
                    $( '#dl-menu2' ).dlmenu({
                animationClasses : { classin : 'dl-animate-in-2', classout : 'dl-animate-out-2' }
            });
        });
    </script>

私の質問は、メニュー 2 が開いているときにメニュー 1 を閉じるにはどうすればよいですか? メニュー 1 をクリックした瞬間にメニューが開きますが、メニュー 2 をクリックしても閉じません。

4

1 に答える 1

2

dlmenu コードは興味深いものです。一度初期化すると、関数を実行するための文字列を使用して再度呼び出すことができます。そのため、次のように変更することindex.htmlで、git リポジトリ (ここ) からメニューを自動的に開くように変更できます$(function(){...}。

$(function() {
    $('#dl-menu').dlmenu();
    $('#dl-menu').dlmenu("openMenu");
});

上記を使用してメニューを閉じることもできます。ただし、リスナーを dlmenu コードに追加するメカニズムが見つかりませんでした。

したがって、最善の解決策は、独自のものを追加して以下を利用することです。

    $('#dl-menu').dlmenu("closeMenu");

は'#dl-menu'メニュー div の id への参照であるため、閉じたいメニューを id で指定できます。

トリッキーな部分は、他のメニューがクリックされたときにリスナーを起動することです。これは、メニューが開かれるたびに dlmenu のロジックが $(body) のクリックをクリアして設定するという事実によって複雑になります。最も簡単な方法は、ボタンに ID を追加することです。現在のロジックindex.htmlは次のとおりです。

<button class="dl-trigger">Open Menu</button>

id がないため、定義したメニューごとに 1 つ追加します。

<button id="dl-menu1-button" class="dl-trigger">Open Menu</button>

次に、 を次のように変更できます (別のメニューを追加し、および$(function() {...}を持つように ID を変更したと仮定します)。dl-menu1dl-menu2

$(function() {
    $('#dl-menu1').dlmenu();
    $('#dl-menu2').dlmenu();

    $('#dl-menu1-button').on("click", function() {
        $('#dl-menu2').dlmenu("closeMenu");
    });
    $('#dl-menu2-button').on("click", function() {
        $('#dl-menu1').dlmenu("closeMenu");
    });
});

上記のように git リポジトリのクローンを取得し、ID を追加して init を変更することで、上記をテストしました。あなたが尋ねたように働きました。

于 2013-07-16T09:55:44.323 に答える