クリックしたときにDIVを非表示にする

私は動的に生成されるフォームシステムを持っています。クリックしたときにDIVを非表示にする

以下のコードは、カレンダーを呼び出すボタンです。

<input id="btn1_0" type="button" value="☵" class="rsform-calendar-box btnCal rsform-calendar-button btn btn-default" onclick="RSFormPro.YUICalendar.showHideCalendar('cal1_0Container');">

上記のボタンをクリックしたときに表示されるdivは次のとおりです。私は誰かがあまりにもdiv要素の外でクリックしたときに、カレンダーを非表示にする

<div id="cal1_0Container" style="clear: both; position: absolute; z-index: 9987;" class="yui-calcontainer single"> 
Calendar Here 
</div>

：はdivの内でクリックされたときにボタンを押すと、スタイルdisplay:noneを切り替えます。

このJSを試しましたが、divにdisplay:noneを設定しても機能しません。私は間違って何をしていますか？それはhttps://developer.yahoo.com/yui/calendar/

@公式ドキュメントを見てみるために受けることができます。その場合には、あなたがYUICalendarライブラリを使用しようとしているように見えます

jQuery(document).click(function(event) { 
    if (!jQuery(event.target).hasClass('yui-calcontainer')) { 
     jQuery(".yui-calcontainer").hide(); 
    } 
});

出典

2016-08-27 Elaine Byene

は私の答えは参考になりましたなら、私に知らせて、私のHTMLました。 –

、私は何をあなたを達成する可能性がある例を見つけました達成しようとしています：https://developer.yahoo.com/yui/examples/calendar/calcontainer_clean.html

出典

2016-08-27 04:44:39 Sterling

クリックイベントをドキュメントにバインドすることはできません。それを体に縛る。

jQuery('body').click(function(event) { 
    if (!jQuery(event.target).hasClass('yui-calcontainer')) { 
     jQuery(".yui-calcontainer").hide(); 
    } 
}); 

or 

jQuery(document).on('click', 'body', function(event) { 
    if (!jQuery(event.target).hasClass('yui-calcontainer')) { 
     jQuery(".yui-calcontainer").hide(); 
    } 
});

出典

2016-08-27 04:51:18 depiction

私は両方のソリューションを試しましたが、結果は同じです。あなたのJSを追加すると、デフォルトの状態は '

'に変わりますので、デフォルトで 'display; none'が再生されるので、ボタンはもう機能しません。 –

これはディスプレイを追加しないため、このJSコードは動作しているので、何か他のものが原因です。私はYUICalendarに慣れていませんが、ターゲットに "yui-container"クラスがある場合、JS内のボタン（RSFormPro.YUICalendar.showHideCalendar（ 'cal1_0Container'））にある同じshowHide関数を呼び出すことができます。 – depiction

divは彼の関数を持つボタンによっても呼び出されます： 'onclick =" RSFormPro.YUICalendar.showHideCalendar（ 'cal1_0Container'）; "'あなたのJavaScriptを追加すると動作を停止します。 –

あなたはこのコード

$(document).dblclick(function (e) 
 
           { 
 
       var container = $(".yui-calcontainer"); 
 
       if (!container.is(e.target) // if the target of the click isn't the container... 
 
        && container.has(e.target).length === 0) // ... nor a descendant of the container 
 
       { 
 
        container.hide(); /// or container.toggle(); to show/hide 
 

 
       } 
 
      });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<body style="height:100% ; width:100%;";> 
 

 
     <div id="cal1_0Container" style="clear: both; position: absolute; z-index: 9987;" class="yui-calcontainer single"> 
 
      Calendar Here 
 
     </div> 
 
    </body>

表示/非表示のために使用container.toggle();

以下チェックはそれ、これはあるなら、私に知らせて、このようないくつかのトリックを使用することができますあなたに役立つ。

これは

<!DOCTYPE html> 
<html> 
    <head> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
     <script> 
      $(document).dblclick(function (e) 
           { 
       var container = $(".yui-calcontainer"); 
       if (!container.is(e.target) // if the target of the click isn't the container... 
        && container.has(e.target).length === 0) // ... nor a descendant of the container 
       { 
        container.toggle(); 
       } 
      }); 
     </script> 
    </head> 
    <body style="height:100% ; width:100%;";> 

     <div id="cal1_0Container" style="clear: both; position: absolute; z-index: 9987;" class="yui-calcontainer single"> 
      Calendar Here 
     </div> 
    </body> 
</html>

出典

2016-08-27 05:18:34

'container.toggle（）;'をどこに追加しますか？私は生成されたフォームを変更することはできません！利用可能なフォームのIDまたはクラスのみを使用できます。 –

ありがとうございました。本当にそれを感謝し、投票しました。しかし、あなたは私の質問を理解していない:( –

クリックしたときにDIVを非表示にする

答えて

関連する問題