回答編集履歴
3
CSS設定の調整(pointer-eventsを追加)
test
CHANGED
|
@@ -94,6 +94,12 @@
|
|
|
94
94
|
|
|
95
95
|
|
|
96
96
|
|
|
97
|
+
3/30追記:
|
|
98
|
+
|
|
99
|
+
`pointer-events`を指定しないとクリックイベントが発生しにくいという問題が合ったのを修正しました.
|
|
100
|
+
|
|
101
|
+
|
|
102
|
+
|
|
97
103
|
```CSS
|
|
98
104
|
|
|
99
105
|
p.controller+div{
|
|
@@ -104,6 +110,8 @@
|
|
|
104
110
|
|
|
105
111
|
background-color: yellow;
|
|
106
112
|
|
|
113
|
+
pointer-events: unset;
|
|
114
|
+
|
|
107
115
|
}
|
|
108
116
|
|
|
109
117
|
p.controller.hidecontents+div{
|
|
@@ -111,6 +119,8 @@
|
|
|
111
119
|
line-height: 0em;
|
|
112
120
|
|
|
113
121
|
opacity: 0;
|
|
122
|
+
|
|
123
|
+
pointer-events: none;
|
|
114
124
|
|
|
115
125
|
}
|
|
116
126
|
|
2
動作サンプルへのリンクを追加
test
CHANGED
|
@@ -141,3 +141,5 @@
|
|
|
141
141
|
</div>
|
|
142
142
|
|
|
143
143
|
```
|
|
144
|
+
|
|
145
|
+
[http://jsdo.it/defghi1977/cabg](http://jsdo.it/defghi1977/cabg)
|
1
コードを追加(よりシンプルに)
test
CHANGED
|
@@ -81,3 +81,63 @@
|
|
|
81
81
|
|
|
82
82
|
|
|
83
83
|
[http://jsdo.it/defghi1977/aY1x](http://jsdo.it/defghi1977/aY1x)
|
|
84
|
+
|
|
85
|
+
|
|
86
|
+
|
|
87
|
+
---
|
|
88
|
+
|
|
89
|
+
|
|
90
|
+
|
|
91
|
+
もっとシンプルに出来るのではなかろうか？と試してみたもの.
|
|
92
|
+
|
|
93
|
+
`input[type="checkbox"]`だと, 選択状態と表示状態が重複するため, `classList.toggle`を使ってクラスの存在有無に状態を集約してみたもの.
|
|
94
|
+
|
|
95
|
+
|
|
96
|
+
|
|
97
|
+
```CSS
|
|
98
|
+
|
|
99
|
+
p.controller+div{
|
|
100
|
+
|
|
101
|
+
transition: all 120ms ease-in-out;
|
|
102
|
+
|
|
103
|
+
line-height: 1em;
|
|
104
|
+
|
|
105
|
+
background-color: yellow;
|
|
106
|
+
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
p.controller.hidecontents+div{
|
|
110
|
+
|
|
111
|
+
line-height: 0em;
|
|
112
|
+
|
|
113
|
+
opacity: 0;
|
|
114
|
+
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
```
|
|
118
|
+
|
|
119
|
+
```HTML
|
|
120
|
+
|
|
121
|
+
<p class="controller hidecontents" onclick="this.classList.toggle('hidecontents')">
|
|
122
|
+
|
|
123
|
+
属性
|
|
124
|
+
|
|
125
|
+
</p>
|
|
126
|
+
|
|
127
|
+
<div>
|
|
128
|
+
|
|
129
|
+
contents<br/>
|
|
130
|
+
|
|
131
|
+
contents<br/>
|
|
132
|
+
|
|
133
|
+
contents<br/>
|
|
134
|
+
|
|
135
|
+
contents<br/>
|
|
136
|
+
|
|
137
|
+
contents<br/>
|
|
138
|
+
|
|
139
|
+
contents
|
|
140
|
+
|
|
141
|
+
</div>
|
|
142
|
+
|
|
143
|
+
```
|