3

ボタンをクリックすると、画像付きの div が表示されます (チャットの絵文字パネルのように) もう一度クリックすると、div が非表示になりますが、やりたいことは次のとおりです: div が既に表示されている場合ページの他のものをクリックして、非表示にしたい。私はこれを試しました：

$("myBtn").click(function(){
    // show div
});

$(document).click(function(){
// hide div
});

「myBtn」をクリックすると、div が表示され、自動的に非表示になります。どうすれば修正できますか？

お時間をいただきありがとうございます。

4

5 に答える 5

16

次のことを試すことができます。

$(document).on('click', function(evt) {
    if(!$(evt.target).is('#my-id')) {
        //Hide
    }
});

アップデート

完全なワーキングセットを持つことができるように：

$('#mybutton').on('click', function(evt) {
    $('#mydiv').show();
    return false;//Returning false prevents the event from continuing up the chain
});
于 2013-03-05T21:59:05.697 に答える
1

元の を表示すると同時に、次のようにスタイル/css が設定され<div>た新しい をページに追加します。<div>

.ui-widget-overlay {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 100;
}

オリジナル<div>(閉じずにクリックできるようにしたいもの) の が高くz-index、ページ上の他のすべての z-index が低いことを確認してください。

新しい div をページに追加するときは、.ui-widget-overlayクラスを指定し、クリック ハンドラーを追加してその<div>. クリック ハンドラーを使用してオーバーレイ div を追加すると、次のようになります。

$('<div class="ui-widget-overlay">')
    .click(function() {
        $('.ui-widget-overlay').remove();
        $('selector-for-original-div').hide();
    })
    .appendTo('body');

このすべての結果: 2 つの div があります。1 つ目は、表示したいもので、ユーザーがそれを閉じずにクリックできるようにするものです。2 つ目は、最初の div の下にある非表示の div で、ブラウザー ウィンドウ全体を占めるため、ユーザーが上部の div 以外の場所をクリックすると、クリック イベントがインターセプトされます。 . そのクリック イベント内で、非表示の div を削除し、元の div を非表示にします。

于 2013-03-05T22:03:25.077 に答える
0

更新しました

要素が表示されたときに「アクティブ」なクラスがあると仮定すると、次のようになります。

$('html').click(function(e){

  if(!$(e.target).attr("id") == "my-id") { 

  }

});
于 2013-03-05T21:56:12.043 に答える
0 
<script type="text/javascript">
  $('body').click(function() {
   if($("div").is(':visible')){
    $("div").hide();
   }
  });
</script>

ここでの $("div") セレクターは、id またはクラスのいずれかを持つ div である必要があります。たとえば、<div class="class" id="id">thenがまたは$("div")に変更される場合$("div.class")$("div#id")

于 2013-03-05T21:58:30.933 に答える
-1 
<div class="slControlWrapper">
    <div class="slControlLabel">
        <asp:Label ID="lblSL" CssClass="lblSL" runat="server">Clickable Label</asp:Label>
    </div>
    <div class="slControlSeparator">

    </div>
    <div class="slControlDropDown">

    </div>
     <div id="wndSL">
        This is the hidden content of my DIV Window
    </div>
    <div id="test">
    I am for test click on me
    </div>
</div>


 $('.slControlLabel, .slControlDropDown').bind('click',function(event){

   $('#wndSL').show(); 
 event.stopPropagation();
 });


$('html').click(function() {
   $('#wndSL').hide(); 
});


    #wndSL {

display:none;     background-color: blue;    height:500px;    width:590px;
}

ここでちょっと見てください：

http://jsfiddle.net/nCZmz/26/

于 2013-03-05T21:58:33.757 に答える