ひとつの項目を開くと他の項目が閉じられるように実装していきます。
- dt要素の調査
- クラスの削除
dt要素の調査
・前回まででアニメーションを付けてより快適なUIを作ってきました。
・今回はそのアコーディオンをより快適に使うためにひとつの項目を開いたら他の項目が閉じるように指定していきましょう。
・これをしておかないと全部開いてしまったユーザーが結局すべてスクロールしないとトップまで戻れなかったり、もともとのメリットであった乱雑な見た目をきれいに見せるというメリットが損なわれてしまうのでつけておいたほうがいいUIです。
・まず使うファイルはJavaScriptです。クリックされた要素の親要素にクラスをつけてそれ以外の要素を調べ、クラスを外すという指示をしていきます。
・dtはすでにdtsとして変数にしてあるのでそれに対してforEachを使います。
・今回は要素をelとして次の処理をしていくように指定します。これはdtを前回使っていて区別していきたいのでelementのelを使っていきたいと思います。
・そして前回使ったdtと今回新たに定義したelが異なっていたらappearクラスを外していけばいいのでif関数で異なっていたらと書いていきます。if (dt !== el) ですね。
クラスの削除
・最後に処理内容を書いていきたいのでappearクラスを外すように指定していきます。el.parentNode.classList.remove(‘appear’);と書いていけばいいでしょう。
・こんな感じの書き方になります。
dts.forEach(el => {
if (dt !== el) {
el.parentNode.classList.remove(‘appear’);
}
});
・今までアコーディオンを作っていく方法を見てきましたがこれもひとつの作り方のひとつです。
・日々作り方等は簡略化したりより便利なUIが開発されているので最新の情報をチェックしておきましょう。
