Question

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

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

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

我使用jQuery来处理＆＃34; #test＆＃34;上的点击事件。在fadeIn回调中，我绑定了body click事件以了解用户何时点击任何地方，在这种情况下我隐藏了文本。我需要将此点击＆＃34;关闭＆＃34;，如果我不显示文本并立即再次消失，因为事件仍然受约束。

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

当我使用＆＃34; .off＆＃34;我真的只想在＆＃39; body＆＃39;上取消绑定这个非常具体的点击事件。而不是＆＃39; body＆＃39;上的所有点击事件。 - ＆GT;然而它解除了每一个！点击我身上的事件。

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

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

我准备了一个示例来展示我的问题（在显示和隐藏一次后，第二个onclick事件在＆＃39; body＆＃39;不再触发）：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>

在任意位置显示隐藏并正确重置状态

1 个答案: