4

私はこのような同様の質問がここに存在することを知っています:

Opacity:0 (非表示) の CSS3 要素がマウス イベントに応答する

しかし、この質問は違います。

ここに記載されているように、jQuery、CSS を使用してモバイル デバイス用のハンバーガー ナビゲーション メニューを実装しようとしています: Demo。

これはほとんど機能しますが、落とし穴があります。top:0;left:0上記のデモでは、設定によって上部 ( )に固定されたナビゲーション div が非表示になっていますopacity:0。上記のデモではこれは完全に機能しますが、実装すると、非表示の div がクリックに応答し、ページから移動します。

上記のデモでこれがどのように無効になっているのか理解できません (css / js ファイルを再確認しましたが、手がかりはありません)。他にアイデアはありますか？SharePointでこれを試しているので、フィドルを実際に立てることはできません。フィドルでは機能します。使用している場合でもクリックイベントを無効にした方法を理解して、opacity:0複製できるようにする必要があります。ありがとう。

4

2 に答える 2

5

できることは (少なくとも) 2 つあります。の代わりにdisplay: none;orを使用するか、jQuery の preventDefault 関数を使用してメニュー項目がクリック可能にならないようにすることができます。visibility: hidden;opacity: 0;

preventDefault は次のように機能します。

$("#hamburger").click(function(e){
  if ($(this).css('opacity')==0) e.preventDefault();
});

上記のコードの Popnoodles へのクレジット (不透明度が 0 の場合、div 内のクリック可能なリンクを非表示にする)

編集：私はハンバーガーアイコンをクリックできないようにしているので、あなたの質問を誤解しているかもしれませんが、ナビゲーションメニューをクリックできないようにする必要があるとあなたは言っていると思いますよね？

それは次のように動作するはずです：

$('a[class="nav-link"]').click(function(e){
  if ($(nav).css('opacity')==0) e.preventDefault();
});

nav-linkナビゲーション メニューのリンクにクラスを追加します。

于 2015-10-10T12:30:22.363 に答える
3

彼らが使用した実装は、ユーザーのマウスが参照するアクセス層を変更するために z-index プロパティを使用することでした。z-index が低い要素は、z-index が高い要素の下層にあることを意味します。z-index のデフォルト値は 1 であることに注意してください。適切な反応を実現するにはz-index:-1;、nav 要素とコンテンツ レイヤーz-index:1以上を指定するだけです。

于 2015-10-10T14:33:45.793 に答える