1

レスポンシブ Web サイトで 3 レベルの CSS メガメニューを作成します。デスクトップサイズでは問題なく動作しますが、モバイル版ではサブメニューを表示する代わりにメニューをクリックすると、href=""属性に追加されたリンクに従います。

モバイル メニューのスクリーンショットを次に示します (このスクリーンショットを作成するために、どのように表示されるかを示すためにアンカー タグを削除しました)。

モバイルメニューのスクリーンショット

疑似クラスを使用してサブメニューを表示するため、デスクトップ版では:hover問題ありませんが、タッチスクリーンでメニューを使用できるようにしたいため、小さいサイズではそれを行うことができないため、:hover疑似クラスをクリックイベントに変換しましたjQueryの。（アンカータグを完全に削除したくはありません。そうすると、デスクトップサイズでも使用できなくなるためです。）

jQuery を使用してリンクを非アクティブにしようとしましたが (以下を参照)、機能しますが、アンカー タグが URL をたどることができないだけでなく、サブメニューも無効になります。

$("li.menu > a").on("click", function() {
  return false;
});

ブラウザがクリック時にリンクをたどらないようにコードを改善するにはどうすればよいですか?

4

2 に答える 2

3

少なくとも 4 つの方法でこれを行うことができます。

  • href属性を設定します#（ページを一番上までスクロールします）
  • 属性hrefをjavascript:void(0);
  • 属性を削除しますが、css を使用して要素ごとhrefに追加します(これをお勧めします)cursor:pointerali.menu > a { cursor:pointer; }
  • e.preventDefault()javascript (jquery、以下を参照) で使用します。

$("li.menu > a").on("click", function(e) { e.preventDefault(); });

于 2013-11-05T11:40:57.097 に答える