CSSトランジションを介して表示および非表示にする入力フィールドを取得しようとしています。私はcssとhtmlの部分を理解しました。divがクリックされたときに表示/非表示を切り替える入力が欲しいです。また、入力がフォーカスを失った場合（ぼかし）に非表示にしたいと思います。
divをもう一度クリックするときを除いて、ほとんど機能しています。ぼかしはクリック イベントの前に発生します。したがって、blur イベントはクラスを削除しますが、クリック イベントはクラスを再適用します。標準的な順序はぼかしが最初だと思います。したがって、基本的に期待どおりに機能していますが、望ましいものではありません。
機能する州。
- 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");
}
});