#73 jQueryを使わないでアコーディオンUIを作る
ちなみにjQueryで作るとこんな感じ
$('.accordion').each(function(){
$(this).on('click', function(e){
e.preventDefault();
$(this).siblings('.accordion').removeClass('active');
$(this).toggleClass('active');
});
});
Vanilla.jsで作る場合、siblings 兄弟要素にどうやってアクセスするかがわかない。
どうやらsiblingsに相当するメソッドは無いようで、
↓まずは親のDOMにアクセスして、親から子供全体を拾ってacc.parentNode.querySelectorAll('.accordion')、それを引数にいれて回し、thisじゃないかをif文で判断するようです。
document.querySelectorAll('.accordion').forEach(function(acc) {
acc.addEventListener('click', function(e) {
e.preventDefault();
acc.parentNode.querySelectorAll('.accordion').forEach(function(sib) {
if (sib !== acc) {
sib.classList.remove('active');
}
});
acc.classList.toggle('active');
});
});
↓デモ
jQueryのsiblingsを実装するにはVanilla.jsだと3ステップくらい必要ですね。
ヘッダー画像は、ルノアールのピアノの前のマンデスの娘たち 1888年
この記事が気に入ったらサポートをしてみませんか?