0

jqueryのアコーディオンを使用してネストされたメニューを作成しています。ネストには最大2つのレベルがあります。各ヘッダーは、次の2つのイベントに応答する必要があります。

  1. エリアの左側半分をクリックすると、アイテムが選択されます
  2. エリアの右側半分をクリックすると、アイテムを開いたり閉じたりして、子供たちが表示/非表示になります

これらの2つのイベントは相互に排他的であり、それぞれに独自のイベントハンドラーがあります。

HTMLは次のようになります。

<div class="accordion">
  <h3>
    <a href="#">
       <span>some text</span>
       <span>more text</span>
    </a>
    <div class="lightning-rod"></div>
  </h3>
  <div>
     <!-- content goes here -->
  </div>
...
</div>

クラス付きのdiv.lightning-rodは、要素の左半分をカバーするようにスタイル設定されています。ハンドラーは「クリック」イベントにバインドされ、選択を処理します。ユーザーが右側をクリックすると、アコーディオンがクリックをキャッチし、子の切り替えを行います。

これはChromeで機能しますが、IE9で問題が発生します。IE9の場合：

  • 右側をクリックすると、jqueryがトグルを処理し、トグルハンドラーが呼び出されます。
  • 左側をクリックすると、lightning-roddivがクリックをキャッチし、選択ハンドラーを呼び出します。
  • divの背後にある要素内のスパンのテキストをクリックすると.lightning-rod、どちらのハンドラーも呼び出されず、jqueryが子を切り替えます。

.lightning-roddivが要素よりも優先され、chromeの場合と同じようにクリックをキャッチするためにできることはありますか？

ありがとう

4

0 に答える 0