Question

所以我的问题有点复杂，然后我可以适应标题。我试图重新创建像trello如何评论卡片的东西。在trello上，当您单击新注释textarea内部时，textarea会展开并包含一个包含＆＃34;提交注释＆＃34;链接以及其他几个不同操作的链接显示（让我们称之为＆＃34; links-div＆＃34;。

他们只是通过添加一个＆＃34; is-focused＆＃34; class到＆＃34; links-div＆＃34;的父div。并通过CSS处理未隐藏。

我被困的地方是，如果你点击textarea外面（模糊它），textarea会缩小并缩小＆＃34; links-div＆＃34;再次隐藏除非您点击＆＃34; links-div＆＃34;内的其中一个链接。

我想重新创建此内容，并且可以点击我的＆＃34; links-div＆＃34;中的链接或提交按钮。没有它隐藏，但如果我点击那些＆＃34; links-div＆＃34;之外的任何东西，它应该正常隐藏。我将如何重建这个？感谢。

Answer 1

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

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

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

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

Answer 2

所以我在经过@Alex McMillan的回答后得到了这个工作。它实际上比我更简单。我没有在textarea上使用.on 'focus'和.on 'blur'事件，而是在文档中使用了.on 'mousedown'事件。

这是一个jsfiddle https://jsfiddle.net/h9ohkzdf/8/。

我可以尝试使用包含div而不是整个文档，看看是否有效。

如何在textarea聚焦时显示div并在texQuery中使用jQuery模糊时隐藏它？

2 个答案: