1

ドキュメントをクリックすると、単純な非表示 div を実行しようとしています。私はそれを機能させることができないようです。基本的に、ボタンをクリックするとdivがオンになるようにします。そして、他の場所 (div 以外) をクリックすると、オフになります。

スクリプトは次のとおりです。

$(document).ready(function(){

    $(".slidingDiv").hide();
    $(".show_hide").show();

$('.show_hide').click(function(){
    $('.slidingDiv').slideToggle();
    $(document).one(function(){
        $('.show_hide').show();
    });
});
});

CSS は次のとおりです (これは正しい CSS であり、以下の正しい JQuery を使用しています!)

.slidingDiv {
background-color: #FFF;
border:3px solid #000;
border-radius:0 0 15px 15px;
float:right;
height:175px;
padding:20px;
position:relative;
top:-18px;
width:300px;
z-index:100;
display:none;
}

.show_hide {

}

そしてhtml：

<div class="slidingDiv">Hello</div>

どんな助けでも素晴らしいでしょう。

これは、スクリプトを含め、現在実行しているすべてのものです。

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
    $(function(){ //<----shorter version of doc ready. this one can be used ->jQuery(function($){ 
      $('.show_hide').click(function(e){ // <----you missed the '.' here in your selector.
          e.stopPropagation();
          $('.slidingDiv').slideToggle();
      });

    $('.slidingDiv').click(function(e){
        e.stopPropagation();
    });

    $(document).click(function(){
       $('.slidingDiv').slideUp();
    });
});
</script>
4

5 に答える 5

12

ここであなたの場合、イベントを停止して親にバブルする必要があります.stopPropagation():

$('.show_hide').click(function(e){ // <----you missed the '.' here in your selector.
    e.stopPropagation();
    $('.slidingDiv').slideToggle();
});
$('.slidingDiv').click(function(e){
    e.stopPropagation();
});

$(document).click(function(){
     $('.slidingDiv').slideUp();
});

デモフィドルをチェックアウト

ドキュメントから：

event.stopPropagation()

イベントが DOM ツリーをバブリングしないようにして、親ハンドラーにイベントが通知されないようにします。

参考までに:

これがあなたに伝える必要があるかどうかはわかりませんが、次の方法に従う必要があります。

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
   $(function(){ //<----shorter version of doc ready. this one can be used ->jQuery(function($){ 
      $('.show_hide').click(function(e){ // <----you missed the '.' here in your selector.
          e.stopPropagation();
          $('.slidingDiv').slideToggle();
      });
      $('.slidingDiv').click(function(e){
          e.stopPropagation();
      });

      $(document).click(function(){
          $('.slidingDiv').slideUp();
      });
   });
</script>
于 2013-03-14T06:05:13.707 に答える
1

OP、

あなたがする必要があるのは、隠蔽を処理するために、イベントclickを制御したい要素にバインドして表示し、イベントをにバインドすることです。そうは言っても、show関数で使用することが重要です。そうすれば、イベントがバブルアップして、;が非表示になることはありません。<div>clickdocumente.stopPropagation()document<div>

フィドル： http： //jsfiddle.net/qYfWv/

JS

$(document).ready(function () {
    $('button').click(function (e) {
        $('div').fadeIn();
        e.stopPropagation();
    });
    $(document).click(function (e) {
        $('div').fadeOut();
    });
});
于 2013-03-14T06:12:52.427 に答える
0

「ドキュメント」にバインドする代わりに、dom body タグにバインドします。

$('body').on('click', function(e){/* Magic here */})

于 2013-03-14T06:11:21.227 に答える
0 
$('.show_hide').click(function(){

show_hide がクラスであることを忘れている

于 2013-03-14T05:59:47.630 に答える