在任何地方单击时显示隐藏并正确重置状态

Question

我有一个显示和隐藏一些文本的按钮。

  <button id="test">
    Show Toggle
  </button>

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

我使用 jQuery 来处理“#test”上的点击事件。在 fadeIn 回调中，我绑定了 body click 事件以了解用户何时单击任何地方，在这种情况下我会隐藏文本。我需要打开这个点击 "off"，如果我不这样做，文本会出现并立即消失，因为事件仍然是绑定的。

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

当我使用“.off”时，我真的只想取消绑定 'body' 上的这个非常具体的点击事件，而不是 'body' 上的所有点击事件 -> 但它会取消绑定！我有 body 上的点击事件。

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

能够在按下按钮时显示文本然后在执行另一次按下（任意位置）时再次隐藏文本的最佳方法是什么？（这必须多次工作）

我准备了一个例子来说明我的问题（显示和隐藏一次后，'body' 上的第二个 onclick 事件不再触发）：https://jsfiddle.net/x2q70dkm/1/

Answer 1

试试这个：

$(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>

在任何地方单击时显示隐藏并正确重置状态

show hide on click anywhere and reset state properly

javascript

jquery

show-hide