やりたい事
headerの子要素にあるdivがfocusされたら、親要素headerのheightを変更する。
cssにfocus-withinがありますが、これだと子孫要素にfocusされた場合は有効ですが、親要素のStyleを変更する事はできません。
＜小言＞
今回なぜこのようなJSを使う羽目になったかと言いますと、、、
【前提】
・ハンバーガーメニューをCSSのみで実装している
・header内にcontainerを作成して、その中にdiv spanでclose openのアニメーションをつけている
・containerの子孫要素にfocusがあった場合、ハンバーガーメニューを開く仕組みにしている
・ハンバーガーメニューは高さmaxで開きたいのでheaderにheight 100vhを設定している
【問題】
・headerのheightを100vhに設定していると、下のコンテンツのタッチイベントが効かない
【解決策】
・設計を立て直す ←面倒くさいのでやめました・・・
・divにfocusされたらheaderのheightを短くする ←採用
そもそもの設計ミスですが、JS超初心者なので勉強も兼ねてJSを追記することにしました。
header height を調整する2パターンのCSSを作成
cssにheader heightのメソッドを作成します。
/* 閉時ている状態 */
/* 通常時はcloseなので、htmlのheaderにはcloseのclassを予め付与します */
.header_close {
height: 82px;
}
/* 開いた時 */
.header_open {
height: 100vh;
}
divがfocusされたらStyleを変更するJSを記載
focusイベントには、focusとblurを使用します。
focus ＝ 設定
blur = 解除
となります。
focusされるdiv要素にはid名を付与しました。
id=”nav_sp_button”
id名を使って、document.getElementByIdで処理を施していきます。
// DOM呼び出し
window.onload = function(){
// それぞれのhtml要素を変数に格納します。
let headerHeight = document.getElementById('nav_sp_button');
let changeStyle = document.getElementById('header');
// 実行処理を実装します。
// focusされた時
function changeHeightOn(){
changeStyle.classList.add('header_open');
changeStyle.classList.remove('header_close');
}
// 解除する時
function changeHeightOff(){
changeStyle.classList.remove('header_open');
changeStyle.classList.add('header_close');
}
// 実行タイミングを設定します
headerHeight.addEventListener('focus',changeHeightOn);
headerHeight.addEventListener('blur',changeHeightOff);
};
＜個人的ハマりpoint＞
・ハンバーガーメニューの開閉だからとdivをonclickで実装できると思い込んでいた。cssでfocusを設定しているのに早く気付くべきだった…
・DOMのwindow.onloadを忘れていたがために動かなかった。
今までJSに抵抗があり身構えてしまっていましたが、少しずつお近づきになれればなと、、、
上記のちょっとしたJSですが、実装できるとテンション上がります。ブラウザー上で動きが確認できるのはうれしいです！（笑）
【修正】親要素であるheaderにfocus-withinを適用
上記ではJSで子要素にfocusがある時にStyleを変更させていましたが、親であるheaderにもfocus-withinをつけることで解決ができました。
JSの記述は不必要であったので、訂正します。
#header:focus-within{
height: 100vh;
}
親要素であるheaderにfocus-withinを付与して、子孫要素にfocusがあった際の実行処理を記載します。
この3行だけでJSなく実装する事ができました!!
