質問編集履歴
1
修正
title
CHANGED
|
@@ -1,1 +1,1 @@
|
|
|
1
|
-
BootStrap4でのハンバーガーメニューの制御について
|
|
1
|
+
修正BootStrap4でのハンバーガーメニューの制御について
|
body
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
以下の
|
|
1
|
+
以下のような構成のHTMLでBootStrap4を使いハンバーガーメニューを設置しています。
|
|
2
2
|
|
|
3
3
|
768px以下のビューポートで表示されるハンバーガーメニューをタップするとメニューがせり出してくるの機能の参考資料をいじっているのですが、タップしたあとのハンバーガーメニューのアイコン部分の要素が横三本線のままなのでバツになるようなSVGにしようとしています。ハンバーメニューがタップされるとアイコン表示用要素（span）に’active’というCSSクラスを付与してバツのSVGに置き換わるようにしたのですが、クリックイベントでそのコードを追加すると確かにクラスが切り替わってハンバーガーの表示はバツに変わるのですが、メニューがスライドして出てくる機能が効かなくなってしまいます。これはどう回避すべきでしょうか？
|
|
4
4
|
|
|
@@ -31,4 +31,4 @@
|
|
|
31
31
|
});
|
|
32
32
|
```
|
|
33
33
|
|
|
34
|
-
そもそもクリックの対象要素のCSSクラス名はHTMLにあるように'.navbar-toggler'なのに、参考にしている資料のコードでのクラス名は'.navbar-toggle'で最後に’r’がついていません。これでできるのかな？と思いつつやってみるとちゃんとどうさするではありませんか！おどろきでした。実際にそのようなCSSクラスの要素はなくなぜ反応しているのかも不明ですが、実際にはちゃんとメニューがスライドインしてきます。BootStrap自体を全く触ったことがないのですが、これはどういう状態でしょうか？またどう解決すべきでしょうか？
|
|
34
|
+
そもそもクリックの対象要素のCSSクラス名はHTMLにあるように'.navbar-toggler'なのに、参考にしている資料のコードでのクラス名は'.navbar-toggle'で最後に’r’がついていません。これでできるのかな？と思いつつやってみるとちゃんとどうさするではありませんか！おどろきでした。実際にそのようなCSSクラスの要素はなくなぜ反応しているのかも不明ですが、実際にはちゃんとメニューがスライドインしてきます。また自分では設置していない#gnaviや.icon-barとか不明なものがコード内にあり根本的にBootStrapって勉強しないと使えないなと不安になっています。このようにBootStrap自体を全く触ったことがないのですが、これはどういう状態でしょうか？またどう解決すべきでしょうか？
|