10

クリックするとスライドしてコンテンツパネルが表示されるサイドメニューがあります。クリックされたメニュー項目に基づいて、明らかにパネルに入力するさまざまなものが必要です。

メニュー/パネルを操作する関数を書きましたが、部分的に動作します。ただし、何をロードするかを決定しようとしていますevent.target.id(関数が取るeventため) が、リンクされた正方形の端の非常に近くをクリックした場合にのみ値が表示されます。実際のテキストの近くをクリックすると、実際のテキストの近くをクリックしh1ても機能しh6ませidん。

ライブ デモ (「スタイル」四角形の端近くをクリックし、中央をクリックします): http://jsfiddle.net/mAnuD/

<div id="application-frame">
  <div class="panel"></div>
  <ul id="slide-out-menu">
    <li>
      <a href="#" class="item" id="styles-menu">
        <h1>S</h1>
        <h6>Styles</h6>
      </a>
    </li>
    <li>
      <a href="#" class="item" id="designers-menu">
        <h1>D</h1>
        <h6>Designers</h6>
      </a>
    </li>
    <li>
      <a href="#" class="item" id="code-menu">
        <h1>C</h1>
        <h6>Code</h6>
      </a>
    </li>
    <li>
      <a href="#" class="item" id="help-menu">
        <h1>?</h1>
        <h6>Help</h6>
      </a>
    </li>
  </ul>
</div>

リンクされた領域のどこをクリックしても問題にならないようにするには、どうすればこれを修正/改善できますか?

4

2 に答える 2

23

またはに変更event.target.idします。event.currentTarget.idthis.id

はevent.target常にクリックされた最も深い要素ですが、 event.currentTargetorthisはハンドラーがバインドされている要素、またはデリゲート セレクターが一致した要素を指します。

于 2013-03-29T09:22:36.480 に答える
3

いくつかの子孫要素に境界線またはパディングがあるように聞こえますがevent.target、ハンドラーが (効果的に) 接続されている要素の子孫もそうです。

2 つのオプション:

  1. ハンドラーが (事実上) バインドされた要素のthis.idを取得するために使用します。idこれは通常、あなたが望むことを行います。更新されたフィドル

  2. この状況では必要ないと思いますが、このツールキットの他の便利なツールは です。これは、指定した要素、その親、その親などclosestを見て、セレクターに一致する最初の要素を見つけます。. したがって、たとえば、または(必要なアイテムにはクラスがあるため)。更新されたフィドルしかし、繰り返しになりますが、この場合は＃1が必要だと思います。$(this).closest(".item").attr("id")$(event.target).closest(".item").attr("id")item

于 2013-03-29T09:23:33.760 に答える