0

私はまだjavascriptとJQueryにかなり慣れていません...トグル領域の外側をクリックしてこのdivを閉じるにはどうすればよいですか(ユーザーが閉じるボタンを使用する必要はありません)

コードは次のようになります。

 function toggleDiv(divId) {
 $("#"+divId).toggle();
 }

 function showonlyone(thechosenone) {
 $('.newnote').each(function(index) {
      if ($(this).attr("id") == thechosenone) {
           $(this).show(0);
      }
      else {
           $(this).hide(0);
      }
 });
 }

htmlは次のようになります

<div class="note">

     <a id="myHeader1" href="javascript:showonlyone('newnote1');" >
          <img src="images/SN_NotesPage_14.png">
     </a>      

     <div class="newnote" id="newnote1">
          <a>
               <img src="images/SN_NotesPage_16.png">
          </a>
     </div>
</div>

ありがとうございました

4

1 に答える 1

0

私が通常行うことは、オーバーレイを閉じるドキュメント本文にクリック イベント リスナーを追加することです。オーバーレイをクリックして閉じるのを防ぐために、ev.stopPropagation(); を含むオーバーレイに 2 番目のクリック イベント リスナーを追加します。

したがって、jQuery では次のようになります。

$(document.body).bind('click.closeNote', function() {
    $('.newnote').hide();
});
$('.newnote').bind('click.closeNote', function(ev) {
    ev.stopPropagation();
});

もう 1 つの方法は、ページ全体をカバーする透明な div (メモよりも低い zIndex を持つ) を追加することです。その後、クリック イベント リスナーをこの div に追加して、メモを閉じることができます。

編集:上記の例は、クリックするたびにセレクターを実行するため、あまりパフォーマンスが高くないことに注意してください。メモが表示されたときにこのイベントをバインドし、閉じられたときにバインドを解除するだけです。

于 2012-07-31T14:14:15.920 に答える