2012-12-12 23 views
10

jqueryのスライドを使用していますが、DIVの外側をクリックするとshowupクラスを非表示にする方法を知りたいです。感謝! ありがとう!divの外をクリックしたときに項目を非表示にする

オンラインSAMPLE:.showupエリア内からhttp://jsfiddle.net/evGd6/

<div class="click">click me</div> 
<div class="showup">something I want to show</div>​ 
$(document).ready(function(){ 
    $('.click').click(function(){ 
     $(".showup").slideToggle("fast"); 
    }); 
});​ 
.showup { 
    width: 100px; 
    height: 100px; 
    background: red; 
    display:none; 
} 
.click { 
    cursor: pointer; 
} 
    ​ 

答えて

29

停止イベントの伝播:

$(document).on("click", function() { 
    $(".showup").hide(); 
}); 

その後documentまで泡立てるから.showup上でこれらのクリックを防ぎます:

$(".showup").on("click", function (event) { 
    event.stopPropagation(); 
}); 

クリックイベントがdocumentになると、.showup要素が非表示になります。 .showupから開始するクリックイベントは、DOMツリーの上に進むことができず、従ってdocumentに届くことはありません。

はまた、同様documentまでの旅行から、ボタン上の任意のクリックを停止する必要があります。

$(".click").on("click", function (event) { 
    event.stopPropagation(); 
    $(".showup").slideToggle("fast"); 
}); 

そうでなければそのクリックイベントがすぐに.showupの隠れになり、バブルアップdocumentへと。

デモ:http://jsfiddle.net/evGd6/2/

関連する問題