Javascript Jquery DOM操作 Classの付与
やりたいこと
・クリックイベントでハンバーガーメニューをクリックしたらタイトルが消える
・ハンバーガーメニューを閉じたらタイトルが出る
方法
ハンバーガーメニューをクリックイベントをすると、
・メニューにクラスopenが追加→メニュー表示
・タイトルにクラスtitle-closeが追加→タイトル非表示
ハンバーガーメニューの閉じるを押すと
・メニューのクラスopenが削除→メニュー非表示
・タイトルのクラスtitle-closeが削除→タイトル表示
コード
// ハンバーガーメニュークリック時タイトルを消す＆閉じる時出すjs
let h1 = document.querySelector('.header-title-area h1');
document.querySelector('.open-menu').onclick = function(){
h1.classList.add('nav-close') ;
});
if(
document.querySelector('.close-menu').onclick = function(){
h1.classList.remove('nav-close') ;
});
// ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ポイント
・classやid属性はquerySelector()内では('.class名 ')や('id名'）で記入でOK
・クリックをした時にクリックした要素にクラスを追加する方法は
h1.classList.add('nav-close') ;
解説
事前にletで定義したh1
let h1 = document.querySelector('.header-title-area h1');
をh1.classLIst.add('追加したいクラス名'); ※この時は「.」不要
で任意のクラスを追加可能
ちなみに同様のクリックイベントはjqueryだと
$(document).ready(function() {
$('.open-menu').on('click', function() {
$('.overlay').addClass('open');
$('.header-title').addClass('nav-close');
});
$('.close-menu').on('click', function() {
$('.overlay').removeClass('open');
$('.header-title').removeClass('nav-close');
});
});
上記で実装可能
open-menuをクリックすると.overlayクラスにopenクラスを追加
header-titleクラスにnav-closeを追加
下はaddClassをremoveClassにし削除の記述をしている
