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();
}

jquery切换并隐藏在外面点击

2 个答案: