回答編集履歴
4
コメントを受けて追記
answer
CHANGED
|
@@ -21,4 +21,15 @@
|
|
|
21
21
|
「マウスオーバーして表示非表示の操作にしたい」ですが、`label`に`id`などを持たせて`:hover`擬似クラスを使えばいいかと思います。
|
|
22
22
|
ただ、その場合マウスアウトすると非表示に戻ります。
|
|
23
23
|
|
|
24
|
-
### 回答に誤りがあったため一部削除しました
|
|
24
|
+
### 回答に誤りがあったため一部削除しました
|
|
25
|
+
|
|
26
|
+
### コメントを受けて追記
|
|
27
|
+
```HTML
|
|
28
|
+
<input type="checkbox" id="menu_bar01" class="accordion" />
|
|
29
|
+
```
|
|
30
|
+
↓
|
|
31
|
+
```HTML
|
|
32
|
+
<input type="radio" name="menu_bar" id="menu_bar01" class="accordion" />
|
|
33
|
+
```
|
|
34
|
+
のように変更すると、一つのアコーディオンニューだけが開いている状態になります。
|
|
35
|
+
ただし、一度開くと、（他のセレクタでコントロールしない限り）必ず一つは開いている状態になってしまいます。
|
3
回答に誤りがあったため一部削除
answer
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
まず、兄弟セレクタの使い方を間違っているため、動作しません。
|
|
1
|
+
~~まず、兄弟セレクタの使い方を間違っているため、動作しません。~~
|
|
2
|
-
> 同じ親要素の子同士であって、1つ目の要素の後にある2つ目の要素を選択します
|
|
2
|
+
> ~~同じ親要素の子同士であって、1つ目の要素の後にある2つ目の要素を選択します
|
|
3
|
-
[一般兄弟結合子 - CSS: カスケーディングスタイルシート | MDN](https://developer.mozilla.org/ja/docs/Web/CSS/General_sibling_combinator)
|
|
3
|
+
[一般兄弟結合子 - CSS: カスケーディングスタイルシート | MDN](https://developer.mozilla.org/ja/docs/Web/CSS/General_sibling_combinator)~~
|
|
4
4
|
|
|
5
5
|
```css
|
|
6
6
|
#menu_bar01:checked ~ #links01 li
|
|
7
7
|
```
|
|
8
|
-
`li`の親要素は`ul`ですから、このセレクタに当てはまる要素はありません。同様の誤りが複数見られます。
|
|
8
|
+
~~`li`の親要素は`ul`ですから、このセレクタに当てはまる要素はありません。同様の誤りが複数見られます。
|
|
9
|
-
解決方法は、`ul`にスタイルを当ててください。
|
|
9
|
+
解決方法は、`ul`にスタイルを当ててください。~~
|
|
10
10
|
|
|
11
11
|
そして、`transition: height`ですが、
|
|
12
12
|
> トランジション効果を適用する CSS プロパティを指定します
|
|
@@ -19,4 +19,6 @@
|
|
|
19
19
|
|
|
20
20
|
### 質問が追加されていたので追記
|
|
21
21
|
「マウスオーバーして表示非表示の操作にしたい」ですが、`label`に`id`などを持たせて`:hover`擬似クラスを使えばいいかと思います。
|
|
22
|
-
ただ、その場合マウスアウトすると非表示に戻ります。
|
|
22
|
+
ただ、その場合マウスアウトすると非表示に戻ります。
|
|
23
|
+
|
|
24
|
+
### 回答に誤りがあったため一部削除しました
|
2
訂正
answer
CHANGED
|
@@ -18,5 +18,5 @@
|
|
|
18
18
|
最後に、「特定のメニューをクリックすると開いていたメニューが自動的に閉じる」ですが、「特定のメニュー」を`#close`とすると`#close:checked ~ ul`のようなセレクタで記述できると思いますが、その状態を保持してしまうので、メニューを再度開く際には「特定のメニュー」をもう一度クリックする必要があります。
|
|
19
19
|
|
|
20
20
|
### 質問が追加されていたので追記
|
|
21
|
-
「マウスオーバーして表示非表示の操作にしたい」ですが、`label`に`id`などを持たせて`:hover`擬似
|
|
21
|
+
「マウスオーバーして表示非表示の操作にしたい」ですが、`label`に`id`などを持たせて`:hover`擬似クラスを使えばいいかと思います。
|
|
22
22
|
ただ、その場合マウスアウトすると非表示に戻ります。
|
1
質問が追加されていたので追記
answer
CHANGED
|
@@ -15,4 +15,8 @@
|
|
|
15
15
|
とあるように、指定した`height`プロパティだけに有効になります。
|
|
16
16
|
解決方法ですが、`transition: all`とするのが無難です。
|
|
17
17
|
|
|
18
|
-
最後に、「特定のメニューをクリックすると開いていたメニューが自動的に閉じる」ですが、「特定のメニュー」を`#close`とすると`#close:checked ~ ul`のようなセレクタで記述できると思いますが、その状態を保持してしまうので、メニューを再度開く際には「特定のメニュー」をもう一度クリックする必要があります。
|
|
18
|
+
最後に、「特定のメニューをクリックすると開いていたメニューが自動的に閉じる」ですが、「特定のメニュー」を`#close`とすると`#close:checked ~ ul`のようなセレクタで記述できると思いますが、その状態を保持してしまうので、メニューを再度開く際には「特定のメニュー」をもう一度クリックする必要があります。
|
|
19
|
+
|
|
20
|
+
### 質問が追加されていたので追記
|
|
21
|
+
「マウスオーバーして表示非表示の操作にしたい」ですが、`label`に`id`などを持たせて`:hover`擬似属性を使えばいいかと思います。
|
|
22
|
+
ただ、その場合マウスアウトすると非表示に戻ります。
|