teratail
回答率
85.48%
質問するログイン新規登録
トップCSS3に関する質問jQueryのクリックの範囲を制限したい

編集履歴

回答編集履歴

4

テキスト修正

2019/08/24 17:08

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -5,6 +5,12 @@
5
5
 
6
6
 
7
7
  #### 1案
8
+
9
+
10
+
11
+ ご質問のコードに、 `.two` を slideToggleさせる if 条件を追加するものです。
12
+
13
+
8
14
 
9
15
  ```javascript
10
16
 
@@ -26,9 +32,11 @@
26
32
 
27
33
 
28
34
 
35
+ 　　
36
+
29
37
  #### 2案
30
38
 
31
- もうひとつ、別案です。（ただしこちらは、JSのコードからスタイルを追加する方法です。）
39
+ これは、JSのコードからスタイルを追加する方法になります。
32
40
 
33
41
 
34
42
 
@@ -56,7 +64,7 @@
56
64
 
57
65
  #### 3案
58
66
 
59
- さらにもう一つ、ひねり出してみました。
67
+ `.two` で発生したclickイベントが `.one` に伝搬されるのを抑止します。
60
68
 
61
69
  ```javascript
62
70
 

3

テキスト修正

2019/08/24 17:08

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -1,6 +1,10 @@
1
1
  こんにちは
2
2
 
3
- 以下でどうでしょう？
3
+ 3つ考えました。
4
+
5
+
6
+
7
+ #### 1案
4
8
 
5
9
  ```javascript
6
10
 
@@ -20,7 +24,13 @@
20
24
 
21
25
 
22
26
 
27
+
28
+
29
+ #### 2案
30
+
23
31
  もうひとつ、別案です。（ただしこちらは、JSのコードからスタイルを追加する方法です。）
32
+
33
+
24
34
 
25
35
  ```javascript
26
36
 
@@ -40,4 +50,34 @@
40
50
 
41
51
 
42
52
 
53
+
54
+
55
+
56
+
57
+ #### 3案
58
+
59
+ さらにもう一つ、ひねり出してみました。
60
+
61
+ ```javascript
62
+
63
+ $('.one').click(function(e) {
64
+
65
+ $('.two').slideToggle();
66
+
67
+ });
68
+
69
+
70
+
71
+ $('.two').click(function(e){
72
+
73
+ e.stopPropagation();
74
+
75
+ });
76
+
77
+ ```
78
+
79
+ - **動作確認用：** [https://jsfiddle.net/jun68ykt/19ovbj5u/1/](https://jsfiddle.net/jun68ykt/19ovbj5u/1/)
80
+
81
+
82
+
43
83
  以上参考になれば幸いです。

2

テキスト修正

2019/08/24 16:19

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -20,7 +20,7 @@
20
20
 
21
21
 
22
22
 
23
- もうひとつ、別案です。
23
+ もうひとつ、別案です。（ただしこちらは、JSのコードからスタイルを追加する方法です。）
24
24
 
25
25
  ```javascript
26
26
 

1

テキスト修正

2019/08/24 15:58

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -17,3 +17,27 @@
17
17
  ```
18
18
 
19
19
  - **動作確認用：** [https://jsfiddle.net/jun68ykt/69pw75j3/2/](https://jsfiddle.net/jun68ykt/69pw75j3/2/)
20
+
21
+
22
+
23
+ もうひとつ、別案です。
24
+
25
+ ```javascript
26
+
27
+ $('.one').click(function(e) {
28
+
29
+ $('.two').slideToggle();
30
+
31
+ });
32
+
33
+
34
+
35
+ $('.two').css('pointer-events', 'none');
36
+
37
+ ```
38
+
39
+ - **動作確認用：** [https://jsfiddle.net/jun68ykt/9f6tb0sq/1/](https://jsfiddle.net/jun68ykt/9f6tb0sq/1/)
40
+
41
+
42
+
43
+ 以上参考になれば幸いです。