teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

1

2022/01/04 02:54

投稿

k49977
k49977

スコア27

title CHANGED
File without changes
body CHANGED
@@ -13,4 +13,39 @@
13
13
  ### 試したこと
14
14
  以下ググる
15
15
  ・jsでのEnterキー操作の実装方法
16
- ・ツールチップの実装方法
16
+ ・ツールチップの実装方法
17
+
18
+
19
+ 以下でEnterでの閉じるはできた
20
+ ```js
21
+ var $icons = $('i');
22
+ var flg = true;
23
+ var speed = 200;
24
+
25
+ $icons.on('click', function () {
26
+ if (flg) {
27
+ flg = false;
28
+ var $baloon = $(this).next('.baloon');
29
+
30
+ if ($baloon.hasClass('is-active')) {
31
+ $baloon.removeClass('is-active').fadeOut(speed);
32
+ } else {
33
+ $('.baloon').removeClass('is-active').fadeOut(speed);
34
+ $baloon.addClass('is-active').fadeIn(speed);
35
+ }
36
+ setTimeout(function(){
37
+ flg = true;
38
+ },speed)
39
+ }
40
+ //他の箇所をEnterしたら閉じるように
41
+ window.document.onkeydown = function(event){
42
+ if (event.key === 'Enter') {
43
+ if (!$(event.target).closest('.baloon').length) {
44
+ $('.baloon').removeClass('is-active').fadeOut(speed);
45
+ }
46
+ }
47
+ }
48
+
49
+ return false;
50
+ });
51
+ ```