3

480px 以下で壊れるレスポンシブ メニューを作成しました。次の場合に反応する場所にそれがあります：

  1. ユーザーが「メニュー」リンクをクリックします。
  2. メニューのスライドがトグルアウトします。
  3. サブメニューも onClick で SlideToggle アウトします。
  4. ただし、どのページもクリックできません。

これは false を返すことと関係がありますか?

ここで例を見ることができます: http://www.stlredtails.com/construction/

レスポンシブ ナビゲーションの動作を確認するには、ブラウザーのサイズを 480px 以下に変更する必要がある場合があります。

ナビゲーション用のjQueryは次のとおりです。

jQuery(".navigation ul").hide();
jQuery("#navigation").click(
    function() {
       jQuery(this).siblings("ul").slideToggle(150, "swing");
       return false;
    }
);
jQuery(".navigation > ul > li").click(
    function() {
       jQuery(this).children("ul").slideToggle(150, "swing");
       return false;
    }
);

皆さん、ありがとうございました！

4

1 に答える 1

4

問題はreturn false. リンクをクリックしているときは、先祖liとul. リンクが「アクティブ化」される前に、祖先のクリック イベントにバインドされた関数が実行されます。それらreturn falseはデフォルトのブラウザーの動作 (離れて移動する) を妨げているためです。

この種のメニュー動作にはより良い解決策がありますが、既に持っているものを使用して (そして、html を変更しないと仮定して)、単純に以下を JavaScript に追加することができます:

$('.navigation').on('click', 'a:only-child', function(e) {
    e.stopPropagation();
});

これは、親の唯一の子であるナビゲーション メニュー内のすべてのリンクを検索し (この場合は、たまたまリンクとして機能し続けたいリンクです)、祖先のクリック イベントが実行されreturn falseないようにします。もう。

于 2012-12-19T02:15:52.710 に答える