13

私はjqueryのslidetoggleを使用していshowupますが、DIVの外側をクリックしたときにクラスを非表示にする方法を学びたいと思っています。ありがとう！

オンラインサンプル：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;
}
    ​
4

2 に答える 2

39

.showupエリア内からのイベント伝播を停止します。

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

次に、これらのクリックが：.showupまでバブリングするのを防ぎます。document

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

クリックイベントがに達するdocumentと、.showup要素が非表示になります。内部から開始するクリックイベントは.showup、DOMツリーをさらに上に進むことができないため、に到達することはありませんdocument。

また、ボタンのクリックが上に移動するのを停止する必要がありますdocument。

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

そうしないと、そのクリックイベントがにバブルアップし、documentすぐ.showupに非表示になります。

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

于 2012-12-12T00:58:02.080 に答える
0

それでも.showupパネルのクリックを記録したい場合（たとえば、単純な有益なパネルよりも多くしたい場合）、event.stopPropagation()クリックを呼び出すと、そのパネルはタッチ不能/役に立たなくなります。event.cancelBubble = true代わりに使用すると、子供にイベントが発生します.showup。

$('.click').click(function(){
    $(".showup").toggle();
});

$(".showup").on("click", function (/*nothing here*/) {
    event.cancelBubble = true
});

$(document).on("click", function () {
    $(".showup").hide();
});
于 2019-01-25T08:27:39.353 に答える