0

有効にするにはアップグレードが必要なオプションが無効になっている小さなアプリがあります。ユーザーがクリックしてオプションを設定すると、アップグレード手順を示す div が表示されます。Firefox と Chrome (Opera や Safari はまだテストしていません) では問題なく動作しますが、IE (どのバージョンでも) では動作しません。

私が行ったテストでは、javascript が機能しているように見えますが、input 要素を直接クリックしてもスクリプトは実行されません。要素のすぐ外側 (この場合はラジオ ボタン) をクリックすると、機能します。hidden-input の class を持つ div が上に表示されるはずが、その周りに表示されているように見えます。http://brenelz.com/blog/squish-the-internet-explorer-z-index-bug/からの修正を含め、z-indexで行ったことは何も機能していないようです。他の人がこの問題を経験したと思います、しかし、どのように修正できるかわかりません。以下は、参照用のhtmlとjavascriptです。

<div style="display:inline-block; position:relative;">
    <input type="radio" class="radio" id="wcmenucart[cart_icon][1]" name="wcmenucart[cart_icon]" value="1" disabled="" />
    <div style="position:absolute; left:0; right:0; top:0; bottom:0;" class="hidden-input-icon">
    </div>
</div>
<span style="display:none;" class="pro-icon"><i> Available in the <a href="#">Pro Version</a></i></span>

Javascript - 正常に動作するようですが、念のため...

<script type="text/javascript">
    jQuery('.hidden-input-icon').click(function() {
        jQuery('.pro-icon').show('slow');
    });
</script>

CSS:

.hidden -input-iconも.pro-iconも CSS スタイルを持っていません。.pro-icon div には次が含まれstyle="display:none;"、.hidden-input-icon div には以下が含まれますstyle="position:absolute; left:0; right:0; top:0; bottom:0;"

編集：

ここに私のコードにフィドルがあります。うまくいけば、それが状況を明らかにするのに役立つでしょう。

4

1 に答える 1

1

ここで問題が発生しているとは思いませんz-index。無効な要素を介してイベントを伝播する際に問題があると思います。FF と Chrome は明らかにclickイベントをチェーンの次の要素に伝達しますが、IE はそうではありません。 この SO 投稿は同様の問題を扱っていますが、FF を使用しています。彼らのソリューションは IE でも失敗しますが、詳細についてはその投稿に目を通す価値があります。

これは、少なくとも Chrome と IE で機能するソリューションです。そして、このソリューションを使用するように更新されたフィドルがここにあります。

コードは上記のソリューションのコードと非常によく似ています。17 行目の「親」要素と 39 行目の実際のクリック関数のみを変更しました。元のクリック ハンドラも削除しました。私のソリューションが既存の「非無効」要素に干渉しないことがわかるように、フィドルに別のラジオ ボタンを追加しました。

于 2013-03-05T15:28:40.737 に答える