我正在尝试通过 css 转换来显示和隐藏输入字段。我已经弄清楚了css和html部分。我希望输入在单击 div 时切换显示/隐藏。如果输入失去焦点（模糊），我也希望它隐藏。
除了第二次单击 div 外，我几乎可以正常工作。在单击事件之前触发模糊。因此，模糊事件会删除该类，但单击事件会重新应用该类。我相信标准顺序是首先模糊。因此，它基本上按预期工作，只是不是预期的。
有效的状态。
- 单击 div 并输入显示应用焦点，以便用户可以开始输入。
- 单击输入外部，输入隐藏删除焦点。
不工作的状态
- 再次单击 div 以隐藏输入。由于您在输入外部单击，因此会触发 blur 事件。并且，单击事件重新应用该类。因此，它开始隐藏，但随后又显露出来。
我确信有办法实现这一点。我的大脑此刻是糊状的。任何帮助表示赞赏。
$('.clickme').on({
click: function() {
$('.wrapper').toggleClass("left");
if ( $(".wrapper").hasClass("reveal") ) {
$('.large input').focus();
}
}
});
$('.large input').on({ blur: function() {
$('.wrapper').removeClass("reveal");
}
});