jQuery切換並在外部單擊時隱藏

Question

我的工作很好

HTML：

<button class="btn btn-primary">Click</button>

<div class="text" style="display:none">Some text</div>

jQuery的：

$(".btn").click(function(e){
  $(".text").fadeToggle('fast');
}); 

然后我添加了以下內容，以在外部單擊時隱藏文本，現在切換功能不起作用，這意味着當我單擊時它會淡入，如果再次單擊它不會永久淡出，它只會淡出並立即淡入再次。 無論如何，將這兩個功能結合在一起？

$(document).mouseup(function (e){
  var container = $(".text");

  if (!container.is(e.target) // if the target of the click isn't the container...
      && container.has(e.target).length === 0) // ... nor a descendant of the container
  { 
    container.hide();
  }
});

Answer 1

現在正在工作：

$(".btn").click(function(e){
  $(".text").fadeToggle('fast');
});

$(document).on('mouseup', function(e) {
   if(!$(e.target).closest('.text').length) {
     $('.text').each(function(){
         $(this).hide();
     });
   }
});

演示： http : //jsfiddle.net/LKhV5/

Answer 2

簡單的修復只是添加了btn類也被忽略...

var x_con = $('.btn');
if (!container.is(e.target) // if the target of the click isn't the container...
    && container.has(e.target).length === 0 && !x_con.is(e.target)) // ... nor a descendant of the container
{
    container.hide();
}