javascript - 在 jQuery 中，如何在文本区域聚焦时显示 div，并在文本区域模糊时隐藏它？

Question

所以我的问题有点复杂，无法适应标题。我正在尝试重新创建类似 trello 如何在卡片上发表评论的东西。在 trello 上，当您单击新评论文本区域内部时，文本区域会展开，并显示一个包含“提交评论”链接的 div 以及用于不同操作的其他一些链接(我们将此 div 称为“links-div”。

他们只是通过向“links-div”的父 div 添加一个“is-focused”类并通过 CSS 处理取消隐藏来实现此目的。

我遇到的问题是，如果您在文本区域之外单击(使其模糊)，则文本区域会缩小，并且“links-div”会再次隐藏除非您单击其中之一“links-div”内的链接。

我想重新创建它，并且能够单击“links-div”内的链接或提交按钮而不隐藏它，但是如果我单击该“links-div”之外的任何内容，它应该正常隐藏。我将如何重新创建这个？谢谢。

Answer 1

这是一个潜在的解决方案 jsbin

这通过监视 .comment 内元素上的 focus 和 blur 事件并切换 .comment 上的类来实现 本身。

当 .comment 内的元素发生 blur 事件时，我们可以使用 e.relatedTarget找出哪个元素具有新的焦点。然后我们可以检查新聚焦的元素是否存在于 .comment 中。如果是这样，我们“取消”模糊。如果没有，我们将照常继续。

HTML

<div class="comment">
    <textarea id="ta"></textarea>
    <div class="controls">
        <button>One</button>
        <a href="#">Two</a>
    </div>
</div>

<div>
    <a href="#">This is outside the comment</a>
</div>

CSS

.comment .controls {
    display: none;
}

.comment.is-focused .controls {
    display: block;
}

Javascript/jQuery

// The selector ".comment *" will grab any element INSIDE a .comment
$('.comment *').on('focus', function () {
    // Whenever an element inside a comment gets the focus, give
    // its parent element a class
    $(this).parents('.comment').addClass('is-focused');
});

$('.comment *').on('blur', function (e) {
    var $newFocus = $(e.relatedTarget);

    if ($newFocus.parents('.comment').length > 0) {
        // The newly focused element is inside a comment (potentially
        // not the SAME comment - you'll want to fix this) so cancel
        // the blur
        e.preventDefault();
        return;
    }

    // The newly focused element is outside a comment, so continue
    // to blur this element and also remove our class
    $(this).parents('.comment').removeClass('is-focused');
});