0

display:noneでクリック時にのみ表示されるドロップダウンメニューがいくつかあります(jqueryを使用)。ただし、ドロップダウンメニューの「下」にある位置に配置されたdivがあります。ドロップダウンが表示されたときにすべてを上回らなければならないことを考慮して、それらは下にある必要があります。ただし、これらのドロップダウンdivを「クリックスルー」するためにできることはありますか?

「pointer-events:none」があることは知っていますが、これではドロップダウンメニューのすべてのクリックが無効になっているように見えます。これは私にはできません。

私は彼らのウェブサイトのセクション全体をカバーするドロップダウンメニューを備えた何百ものウェブサイトを見てきました。ただし、使用されていないときは、これらのメニューは「下」に配置されたdivをブロックしないので、ここでの解決策は何ですか?

ドロップダウンメニューの配置で修正する必要がありますか?

ありとあらゆる助けをいただければ幸いです。問題を発見するのに私は永遠にかかりました。なぜ私のdivがクリックできないのか、私はとても困惑しました!それから私は「clear:both」を実行しました、そしてそれは下に移動し、そして最終的に隠されたdivが邪魔になっていることに気づきました。

4

1 に答える 1

1

これらのドロップダウンdivで使用しているようです。opacity: 0これにより、それらが所定の位置に保持され、下の要素でマウスイベントが発生するのをブロックします。

次のいずれかを使用して、それらを別の方法で非表示にする必要があります。

  1. visibility: hiddenまたはを使用display: noneします(スクリーンリーダーからも非表示にする場合)

  2. 巨大な負のオフセット(例-999em)を使用して、表示されているビューポートから絶対に離して配置します。
    これにより、スクリーンリーダーで引き続き読み取り可能であることが確認されます。

pointer-events:noneまたは、可視性と一緒に切り替えることもできますが、古いIEはをサポートしていませんpointer-events

于 2012-05-20T18:45:06.133 に答える