hiraku.jsのドロワーメニューが、ページ変遷後にも閉じないです。
LPを作成しています。スマホサイズでhiraku.jsのドロワーメニューが出ます。
が、ドロワーメニュー内のページ外リンクを踏んで作成中のページに戻ると、
ドロワーが表示されたままになります。これを解消したいのです。
ディベロッパーツール上では現象が再現されずスマートフォン実機で見ると、
上記現象が起きます。
ドロワー内の一番上のロゴのリンク先（弊サイトトップページ）から
もどった場合はこの現象は起きないようです。
また、同じリンクを踏んでも
現象が起きる時と起きない時があるようです。
現象はAndroid・iphone実機で確認しております。
HTML初心者です。どうぞよろしくお願いいたします。
【ドロワーメニュー部分のHTML】
<div class="offcanvas-left">
<div class="offcanvas-header">
<a href="https://store.shopping.yahoo.co.jp/exmail/"><img src="../img/logo_sp.png" class="offcanvas-logo" alt="ロゴ"></a>
</div>
<div class="offcanvas-main">
<nav class="offcanvas-main-btn">
<ul>
<li><a href="https://store.shopping.yahoo.co.jp/exmail/guide.html">お支払い方法/配送/返品</a></li>
<li><a href="https://store.shopping.yahoo.co.jp/exmail/info.html" ><i class="fas fa-building fa-fw "></i>会社概要</a></li>
<li><a href="https://talk.shopping.yahoo.co.jp/contact/exmail#" ><i class="fas fa-envelope fa-fw"></i>お問い合わせ</a></li>
<li><a href="https://order.shopping.yahoo.co.jp/cgi-bin/cart-form?sc_i=shp_pc_store_MHD_cart" ><i class="fas fa-shopping-cart fa-fw"></i>カート</a></li>
</ul>
</nav>
<hr>
<nav class="offcanvas-main-txt">
<ul>
<li><a href="https://store.shopping.yahoo.co.jp/exmail/a4b4cdf8cd.html"><i class="fas fa-pencil-alt fa-fw"></i>電報の入力方法</a></li>
<li><a href="https://store.shopping.yahoo.co.jp/exmail/cab8cee3bd.html" ><i class="fas fa-book fa-fw"></i>文例集</a></li>
<li><a href="https://shopping.geocities.jp/exmail/guide/jp_area.html" ><i class="fas fa-truck fa-fw"></i>お届け日時の確認</a></li>
<li><a href="https://shopping.yahoo.co.jp/store_rating/exmail/store/review/" ><i class="fas fa-comments fa-fw"></i>お客様の声</a></li>
<li><a href="https://store.shopping.yahoo.co.jp/exmail/a4e8a4afa4.html" ><i class="fas fa-question-circle fa-fw"></i>よくある質問</a></li>
</ul>
</nav>
<hr>
<div class="offcanvas-footer">
<div class="offcanvas-footer-section">
<p class="offcanvas-footer-title">領収書について</p>
<p class="offcanvas-footer-txt">当店では、ご希望のお客様にPDF形式の領収書を発行しております。ご注文時、備考欄の「ご要望」に領収書希望の旨と、宛名・但し書・送信先のメールアドレスをご記入ください。商品発送後、PDF形式の領収書を添付したメールを送信いたします。</p>
</div>
<div class="offcanvas-footer-section">
<p class="offcanvas-footer-title">プライバシーについて</p>
<p class="offcanvas-footer-txt">電報屋のエクスメールでは、プライバシーを尊重し、個人情報を保護するために細心の注意を払っています。お客様からいただいた個人情報は商品の発送とご連絡以外には一切使用致しません。当社が責任をもって安全に蓄積・保管し、第三者に譲渡・提供することはございません。</p>
</div>
<div class="offcanvas-footer-section">
<p class="offcanvas-footer-title">営業時間について</p>
<p class="offcanvas-footer-txt">ご注文は２４時間受け付けております。日曜日・祝日も電報の受付・発送業務を行います。お電話でのお問合せにつきましては、下記の時間帯にお願いします。<br>【平日・土曜 10:00～18:30】<br>日曜・祝日は、メールにてお問い合わせください。</p>
</div>
</div>
</div>
</div>
【jquery】
/*!
* Hiraku Ver.1.0.8 (https://www.appleple.com)
* Copyright appleple | MIT License
*
*/
;(function umd(factory) {
'use strict';
if (typeof define === 'function' && define.amd) {
define(['jquery'], factory);
} else if (typeof exports === 'object') {
module.exports = factory(require('jquery'));
} else {
factory(jQuery);
}
}(function Hiraku($) {
var defaults = {
direction: 'right',
breakpoint: -1
}
var num = 0;
var winPos = { x: window.scrollX, y: window.scrollY };
var focusableElements = 'a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, *[tabindex], *[contenteditable]';
var animationFrameId;
var windowWidth = 0;
var resizeHandler = function() {
// Check window width has actually changed and it's not just iOS triggering a resize event on scroll
if ($(window).width() === windowWidth) {
return;
}
windowWidth = $(window).width();
$('.js-hiraku-offcanvas').each(function() {
var $this = $(this);
var breakpoint = $(this).data('breakpoint');
if ($this.hasClass('js-hiraku-offcanvas-open') && (breakpoint === -1 || breakpoint >= window.innerWidth)) {
return;
}
if (breakpoint === -1 || breakpoint >= window.innerWidth) {
$this
.addClass('js-hiraku-offcanvas-active')
.attr('aria-hidden', true);
} else {
$this
.removeClass('js-hiraku-offcanvas-active')
.attr('aria-hidden', false)
.trigger('click');
}
});
};
$.fn.extend({
hiraku: function(opt) {
var opt = $.extend({}, defaults, opt);
var id = 'js-hiraku-offcanvas-' + num;
var $this = $(this);
var $btn = $(opt.btn);
var $fixed = $(opt.fixedHeader);
$this
.addClass('js-hiraku-offcanvas-sidebar')
.data('scroll', scroll);
if ($this.parent('.js-hiraku-offcanvas').length === 0) {
$this.wrap('<div class="js-hiraku-offcanvas"/>');
}
$this.attr('role', 'navigation');
var $parent = $this.parent('.js-hiraku-offcanvas');
$parent.data('opt', opt);
$parent
.attr('aria-hidden', 'true')
.attr('aria-labelledby', 'hiraku-offcanvas-btn-' + num)
.attr('id', id)
.data('breakpoint', opt.breakpoint)
.attr('aria-label', 'close');
$('body').addClass('js-hiraku-offcanvas-body');
if (opt.direction == 'right') {
$this.addClass('js-hiraku-offcanvas-sidebar-right');
} else {
$this.addClass('js-hiraku-offcanvas-sidebar-left');
}
if (opt.btn) {
$btn
.addClass('js-hiraku-offcanvas-btn')
.attr('data-toggle-offcanvas', '#' + id)
.attr('aria-expanded', false)
.attr('aria-label', 'Menu')
.attr('aria-controls', id)
.attr('id', 'hiraku-offcanvas-btn-' + num);
}
if (opt.fixedHeader) {
$fixed.addClass('js-hiraku-header-fixed');
}
num++;
resizeHandler();
}
});
$(document).on('click', '.js-hiraku-offcanvas-btn', function(e) {
var $target = $($(this).data('toggle-offcanvas'));
$('<button type="button">Close Offcanvas-Menu Button</button>')
.attr('aria-label', 'Close')
.addClass('js-hiraku-offcanvas-close-btn')
.appendTo($target);
var $this = $(this);
var $body = $('body').css({ 'width': $(window).width(), 'height': $(window).height() });
var $sidebar = $target.find('.js-hiraku-offcanvas-sidebar');
var $first = $target.find(focusableElements).first();
var $last = $target.find(focusableElements).last();
$first.off('keydown.hiraku-offcanvas').on('keydown.hiraku-offcanvas', function(e) {
if ((e.which === 9 && e.shiftKey)) {
e.preventDefault();
$last.focus();
}
});
$last.off('keydown.hiraku-offcanvas').on('keydown.hiraku-offcanvas', function(e) {
if ((e.which === 9 && !e.shiftKey)) {
e.preventDefault();
$first.focus();
}
});
$last.off('click.hiraku-offcanvas').on('click.hiraku-offcanvas', function() {
$target.click();
});
$this
.addClass('js-hiraku-offcanvas-btn-active')
.attr('aria-expanded', true);
winPos.x = window.scrollX;
winPos.y = window.scrollY;
$target
.attr('aria-hidden', false)
.addClass('js-hiraku-offcanvas-open');
setTimeout(function() {
$('html').css('marginTop', -1 * window.scrollY);
if ($sidebar.hasClass('js-hiraku-offcanvas-sidebar-right')) {
$body.addClass('js-hiraku-offcanvas-body-right');
} else {
$body.addClass('js-hiraku-offcanvas-body-left');
}
$sidebar.addClass('active');
$first.focus();
}, 1);
e.preventDefault();
});
$(document).on('click touchstart keyup', '.js-hiraku-offcanvas', function(e) {
// add the ability to close the off-canvas if the escape key is pressed
if (e.type === 'keyup' && e.keyCode !== 27) {
return;
}
if (e.type === 'keyup') {
// simulate the right element instead of passing the active element in DOM (such as triggers)
e.target = document.querySelector('.js-hiraku-offcanvas');
}
if ($(e.target).hasClass('js-hiraku-offcanvas')) {
var opt = $(this).data('opt');
$('.js-hiraku-offcanvas-body')
.addClass('js-hiraku-offcanvas-body-moving')
.removeClass('js-hiraku-offcanvas-body-right')
.removeClass('js-hiraku-offcanvas-body-left');
$('.js-hiraku-offcanvas-sidebar').removeClass('active');
$('body').css({ width: '', height: '' });
setTimeout(function() {
$(e.target)
.removeClass('js-hiraku-offcanvas-open')
.attr('aria-hidden', true);
$('.js-hiraku-offcanvas-body').removeClass('js-hiraku-offcanvas-body-moving');
$('html').css('marginTop', '');
window.scrollTo(winPos.x, winPos.y);
var $btn = $('.js-hiraku-offcanvas-btn-active');
$btn
.removeClass('js-hiraku-offcanvas-btn-active')
.attr('aria-expanded', false)
.focus();
$(e.target).find('.js-hiraku-offcanvas-close-btn').remove();
if (opt && opt.onClose) {
opt.onClose();
}
}, 300);
}
});
$(window).on('resize', function() {
if ('requestAnimationFrame' in window) {
cancelAnimationFrame(animationFrameId);
animationFrameId = requestAnimationFrame(resizeHandler);
} else {
resizeHandler();
}
});
}));