jquery - 在元素 A 上显示 div B 焦点并在元素 B 上隐藏元素 B 模糊

Question

很抱歉这个简单的问题，但我真的没有找到一个用 jquery 编写的简单 && 功能示例。

我的 HTML 代码：

<a class="A"></a>
<div class="B">
    <!-- a form here -->
</div>

我需要一段为我执行此操作的 jquery 代码：“在元素 A 焦点上显示 div B，并在元素 B 模糊上隐藏元素 B”通过“元素 B 模糊”我的意思是专注于除 B 之外的任何其他身体元素

我为它写了一些东西，但它不起作用：

$(function () {
    $('.A').on('focus', function () {
        $('.B').show();
    }, function () {
        $('body').not('.B').on('click', function () {
            $('.B').hide();
        });
    });
});

任何机构都可以帮助我解决这个问题吗？谢谢 ..

Answer 1

好吧..正如您所说，当我们关注 A 时，会调用 body 的 click 事件...避免这种情况的方法是检查元素是 .B 还是它的后代，然后不要 hide() ..在这里摆弄..

$(function () {
   $('.A').on('click', function () {
      $('.B').show();
   });

  $(document).on('click', function (e) {
     if (!$('.A,.B').is(e.target) && $('.A,.B').has(e.target).length === 0) {
          $('.B').hide();
     }
  });

});