はじめに
こんにちは！
年末まで毎日webサイトを作っている者です。
以前、Ap●leの公式サイトのファーストビューを真似して作ったんですが、今回はFooterを真似して作ってみました。
前は見た目だけでしたが今回は機能の方に焦点を当てました。
扱う技術レベルは低いですが、同じように悩んでる初心者の方を勇気付けられれば幸いです。
今日は18日目。(2019/11/5)
よろしくお願いします。
サイトURL
やったこと
Ap●leのFooterを真似して作ってみました。
公式サイトの方はこれです（ぼかしています）↓
画面サイズが小さければ縦に並んで、クリックすれば展開するような仕様です。
では、真似したやつを見てみましょう！↓
まずhtmlですが、表示したいものをリストで並べていきます。
<div class="footer_wrapper">
<div class="footer_direction_column">
<h3 class="panel">製品と情報と購入</h3>
<ul class="closed">
<li>Mec</li>
<li>Mec</li>
<li>Mec</li>
<li>Mec</li>
<li>Mec</li>
<li>Mec</li>
<li>Mec</li>
<li>Mec</li>
<li>Mec</li>
<li>Mec</li>
<li>Mec</li>
</ul>
</div>
<div class="footer_direction_column">
<h3 class="panel">サービス</h3>
<ul class="closed">
<li>Epple</li>
<li>Epple</li>
<li>Epple</li>
<li>Epple</li>
</ul>
<h3 class="panel">アカウント</h3>
<ul class="closed">
<li>Upple</li>
<li>Upple</li>
<li>Upple</li>
</ul>
</div>
...
<!--以下続く-->
サイズが小さくなるとリスト部分の表示が消えてh3部分のみ残ります。その実装は、mediaクエリを使って一定以下のサイズになったらdisplayをnoneにしているだけです。(closedクラスで実装）
@media screen and (max-width:767px) {
.closed {
display: none;
}
...
最後に、画面サイズが小さい時にパネルをクリックするとリストの文字列が出たり消えたりする実装ですが、そこはJavaScriptで実装しています。
window.onload = function () {
let test = document.getElementsByClassName('panel');
console.log(test);
function h3Click(event) {
console.log(event.target);
}
for (var i = 0; i < test.length; i++) {
console.log(test[i]);
test[i].addEventListener('click', function (e) {
console.log(1);
var nowNode = e.target;
var nextNode = nowNode.nextElementSibling;
if (nextNode.className == 'closed') {
nextNode.classList.remove('closed');
console.log(2);
} else {
nextNode.classList.add('closed');
console.log(3);
}
})
}
}
イベントリスナーでクリックされたら関数を実行します。
関数にはeventが引数に渡されていて、nextElementSiblingでクリックされた次の要素、つまり出たり消えたりするリストを特定しています。
クラスにclosedがあったら外し、なかったらつけることで、クリックするとあたかも出たり消えたりするように見えます。ようはdisplay: none;を付けたり外したりしてるだけですね。
感想
途中、getElementsByClassNameでとった要素がうまく反映されなくてかなり時間を食いました。結局、window.onloadをソースコードの頭につけることで解決したんですが、実行順序とか、DOMの状態を意識しないとこれからも同じことが起こるなぁと反省しました。
最後までお読みいただきありがとうございます。明日も投稿しますのでよろしくお願い致します。