0

マルチレベルのレスポンシブ メニューを作成しました: http://codepen.io/mdmoura/pen/FrIbq

1 - 「コンテンツ」項目の上にマウスを置くと、サブメニューが表示されます。

2 - メニューのサイズをモバイル サイズに変更すると、メニュー リンクが表示され、メニューが消えます。

これまでのところとても良いです...欠けているのは次のとおりです。

A - メニュー リンクをクリックすると、メニューが表示または非表示になります。

B - サブメニューの 1 つがクリックされると、その子 ul が表示または非表示になります。

もちろん(A)と(B)はモバイル版のみのはずなので、幅は800px以下。

enquire.js: http://codepen.io/mdmoura/pen/alxkIを使用して解決しようとしました。ので、私は持っています：

$('nav a[href="#"]').click(function (event) {
  event.preventDefault();
});

enquire.register("screen and (max-width: 800px)", {
    match: function () {
      $('nav a[href="#"]').on('click.match', function () {
        $(this).next('ul').toggle();
      })
    },
    unmatch: function () {
      $('nav a[href="#"]').off('click.match');
    }
});

しかし、モバイル版ではなくモバイル版からサイズ変更すると問題が発生します...

誰か助けてくれませんか？Inquire を使用するかどうか ...

ありがとう、ミゲル

4

1 に答える 1

1

ここでの問題は、github からの inquire の読み込みにあったようです。

enquire.js のソースを変更して、一時的にドメインからロードするようにしました。これが実際の例です

更新: jQuery トグルを使用する代わりに、.expanded {display: block;}クリック時にクラス トグルを使用します。http://codepen.io/anon/pen/oHyxK

于 2013-09-15T16:50:02.457 に答える