afficher masquer sur cliquer n'importe où et réinitialiser l'état correctement

Question

J'ai un bouton qui montre et cache du texte. J'utilise jQuery pour gérer l'événement click sur "#test". Dans le callback fadeIn, je lie l'événement click du corps pour savoir quand l'utilisateur clique partout, auquel cas je cache le texte. Je dois désactiver ce clic, sinon le texte apparaîtra et disparaîtra immédiatement car l'événement est toujours lié.

$('#test').click(function() { 
    $('#invisible').fadeIn(500, function() { 
     $('body').on('click', function(e) { 
     $('#invisible').fadeOut(); 
     $(this).off('click'); 
     }); 
    }); 
    }); 

Quand je l'utilise « .off » Je veux vraiment que délier cet événement click très spécifique sur le « corps » et non pas tous les événements cliquez sur « corps » -> mais il délie tous! cliquez sur l'événement sur le corps que j'ai.

$('body').on('click', function(e) { 
    $(this).off('click'); 
}); 

Quelle serait la meilleure approche pour pouvoir afficher le texte lorsque la touche est enfoncée, puis le cacher à nouveau quand une autre presse (partout) est exécuté? (Ce qui doit travailler plusieurs fois)

J'ai préparé un exemple pour montrer mon problème (après avoir montré et cacher une fois, le deuxième événement onclick sur « corps » ne se déclenche pas plus): https://jsfiddle.net/x2q70dkm/1/

Answer 1

Essayez ceci:

$(function() { 
 
    $('#test').click(function(e) { 
 
    e.stopPropagation(); 
 
    $('#invisible').fadeToggle(); 
 
    }); 
 
    
 
    $('body').click(function() { 
 
    $('#invisible').fadeOut(); 
 
    }); 
 
});

#invisible { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="test"> 
 
    Show Toggle 
 
</button> 
 

 
<div id="invisible"> 
 
    stuff to show 
 
</div>