jquery - jqueryの表示ボタンと非表示ボタン

Question

jquery の show と hide に小さな問題があります。

クリックを有効にしてボックスを表示するボタンがあります。

ボックスの外側をクリックしてボックスをフェードアウトすることはできますか

これが私のコードです。

$('.normal-btn.interest').click(function(){
    $('.categories-wrap').fadeIn();
})

$('what needs to be here? ').click(function(){
    $('.categories-wrap').fadeOut();
})

Answer 1

clickはい、イベントを次のdocumentようにバインドできます。

$('.normal-btn.interest').click(function(e){

    // Prevent the event from bubbling up the DOM tree
    e.stopPropagation();
    $('.categories-wrap').fadeIn();
});

$(document).click(function(){
    $('.categories-wrap').fadeOut();
});

Answer 2

これを試して：

$('.normal-btn.interest').click(function(e){
      e.stopPropagation();
     $('.categories-wrap').fadeIn();
});

$(document).not($(".normal-btn.interest")).click(function(){
    $('.categories-wrap').fadeOut();
});