ハンバーガーボタン以外をクリックした時にハンバーガーメニューを閉じる

ハンバーガーボタン以外をクリックした時にハンバーガーメニューを閉じる

ハンバーガーメニューを開いている時に、ページのどこをクリックしてもメニューを閉じるという動作をしたかったのでそれのメモ。

メモ書き

only-child以外をクリックしたら処理

$(‘#gnavi ul li a:not(:only-child)’).click(function (e) {
if ($(this).next(‘.nav_dropdown’).hasClass(‘naviopen’)) {
$(this).next(‘.nav_dropdown’).removeClass(‘naviopen’);
$(‘body’).removeClass(‘naviopen’);
} else {
$(this).next(‘.nav_dropdown’).addClass(‘naviopen’);
$(‘body’).addClass(‘naviopen’);
}
$(‘.nav_dropdown’).not($(this).next()).removeClass(‘naviopen’);
e.stopPropagation();
});

ページのどこをクリックしても閉じる

$(document).click(function (e) {
var taget = (e.target);
if ($(taget).attr(‘id’) !== ‘nav_toggle’) {
$(‘.nav_dropdown’).removeClass(‘naviopen’);
$(‘body’).removeClass(‘naviopen’);
$(‘#nav_toggle’).removeClass(‘active’)
}
});

$(‘#nav_toggle’).click(function () {
//$(‘#gnavi ul.nav_list’).slideToggle();
});

#nav_toggleをクリックした時にクリックでメニュー開閉

$(‘#nav_toggle’).on(‘click’, function () {
if ($(‘body’).hasClass(‘naviopen’)) {
$(‘body’).removeClass(‘naviopen’);
} else {
$(‘body’).addClass(‘naviopen’);
}
this.classList.toggle(‘active’);
});

ブログ