Q&A
前提・実現したいこと
LPを作成しています。スマホサイズでhiraku.jsのドロワーメニューが出ます。
が、ドロワーメニュー内のページ外リンクを踏んで作成中のページに戻ると、ドロワーが表示されたままになります。これを解消したいのです。
該当ページ
文字数制限でHTML・CSSが貼れず、申し訳ありません。
ディベロッパーツール上では現象が再現されずスマートフォン実機で見ると、上記現象が起きます。
該当のソースコード
ドロワーメニュー部分のHTML
html
1<div class="offcanvas-left"> 2 <div class="offcanvas-header"> 3 <a href="https://store.shopping.yahoo.co.jp/exmail/"><img src="../img/logo_sp.png" class="offcanvas-logo" alt="ロゴ"></a> 4 </div> 5 <div class="offcanvas-main"> 6 <nav class="offcanvas-main-btn"> 7 <ul> 8 <li><a href="https://store.shopping.yahoo.co.jp/exmail/guide.html">お支払い方法/配送/返品</a></li> 9 <li><a href="https://store.shopping.yahoo.co.jp/exmail/info.html" ><i class="fas fa-building fa-fw "></i>会社概要</a></li> 10 <li><a href="https://talk.shopping.yahoo.co.jp/contact/exmail#" ><i class="fas fa-envelope fa-fw"></i>お問い合わせ</a></li> 11 <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> 12 </ul> 13 </nav> 14 <hr> 15 <nav class="offcanvas-main-txt"> 16 <ul> 17 <li><a href="https://store.shopping.yahoo.co.jp/exmail/a4b4cdf8cd.html"><i class="fas fa-pencil-alt fa-fw"></i>電報の入力方法</a></li> 18 <li><a href="https://store.shopping.yahoo.co.jp/exmail/cab8cee3bd.html" ><i class="fas fa-book fa-fw"></i>文例集</a></li> 19 <li><a href="https://shopping.geocities.jp/exmail/guide/jp_area.html" ><i class="fas fa-truck fa-fw"></i>お届け日時の確認</a></li> 20 <li><a href="https://shopping.yahoo.co.jp/store_rating/exmail/store/review/" ><i class="fas fa-comments fa-fw"></i>お客様の声</a></li> 21 <li><a href="https://store.shopping.yahoo.co.jp/exmail/a4e8a4afa4.html" ><i class="fas fa-question-circle fa-fw"></i>よくある質問</a></li> 22 </ul> 23 </nav> 24 <hr> 25 <div class="offcanvas-footer"> 26 <div class="offcanvas-footer-section"> 27 <p class="offcanvas-footer-title">領収書について</p> 28 <p class="offcanvas-footer-txt">当店では、ご希望のお客様にPDF形式の領収書を発行しております。ご注文時、備考欄の「ご要望」に領収書希望の旨と、宛名・但し書・送信先のメールアドレスをご記入ください。商品発送後、PDF形式の領収書を添付したメールを送信いたします。</p> 29 </div> 30 <div class="offcanvas-footer-section"> 31 <p class="offcanvas-footer-title">プライバシーについて</p> 32 <p class="offcanvas-footer-txt">電報屋のエクスメールでは、プライバシーを尊重し、個人情報を保護するために細心の注意を払っています。お客様からいただいた個人情報は商品の発送とご連絡以外には一切使用致しません。当社が責任をもって安全に蓄積・保管し、第三者に譲渡・提供することはございません。</p> 33 </div> 34 <div class="offcanvas-footer-section"> 35 <p class="offcanvas-footer-title">営業時間について</p> 36 <p class="offcanvas-footer-txt">ご注文は２４時間受け付けております。日曜日・祝日も電報の受付・発送業務を行います。お電話でのお問合せにつきましては、下記の時間帯にお願いします。<br>【平日・土曜 10:00～18:30】<br>日曜・祝日は、メールにてお問い合わせください。</p> 37 </div> 38 </div> 39 </div> 40 </div>
JavaScript
1/*! 2 * Hiraku Ver.1.0.8 (https://www.appleple.com) 3 * Copyright appleple | MIT License 4 * 5 */ 6;(function umd(factory) { 7 'use strict'; 8 if (typeof define === 'function' && define.amd) { 9 define(['jquery'], factory); 10 } else if (typeof exports === 'object') { 11 module.exports = factory(require('jquery')); 12 } else { 13 factory(jQuery); 14 } 15}(function Hiraku($) { 16 var defaults = { 17 direction: 'right', 18 breakpoint: -1 19 } 20 var num = 0; 21 var winPos = { x: window.scrollX, y: window.scrollY }; 22 var focusableElements = 'a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, *[tabindex], *[contenteditable]'; 23 var animationFrameId; 24 var windowWidth = 0; 25 var resizeHandler = function() { 26 // Check window width has actually changed and it's not just iOS triggering a resize event on scroll 27 if ($(window).width() === windowWidth) { 28 return; 29 } 30 windowWidth = $(window).width(); 31 $('.js-hiraku-offcanvas').each(function() { 32 var $this = $(this); 33 var breakpoint = $(this).data('breakpoint'); 34 if ($this.hasClass('js-hiraku-offcanvas-open') && (breakpoint === -1 || breakpoint >= window.innerWidth)) { 35 return; 36 } 37 if (breakpoint === -1 || breakpoint >= window.innerWidth) { 38 $this 39 .addClass('js-hiraku-offcanvas-active') 40 .attr('aria-hidden', true); 41 } else { 42 $this 43 .removeClass('js-hiraku-offcanvas-active') 44 .attr('aria-hidden', false) 45 .trigger('click'); 46 } 47 }); 48 }; 49 $.fn.extend({ 50 hiraku: function(opt) { 51 var opt = $.extend({}, defaults, opt); 52 var id = 'js-hiraku-offcanvas-' + num; 53 var $this = $(this); 54 var $btn = $(opt.btn); 55 var $fixed = $(opt.fixedHeader); 56 $this 57 .addClass('js-hiraku-offcanvas-sidebar') 58 .data('scroll', scroll); 59 if ($this.parent('.js-hiraku-offcanvas').length === 0) { 60 $this.wrap('<div class="js-hiraku-offcanvas"/>'); 61 } 62 $this.attr('role', 'navigation'); 63 var $parent = $this.parent('.js-hiraku-offcanvas'); 64 $parent.data('opt', opt); 65 $parent 66 .attr('aria-hidden', 'true') 67 .attr('aria-labelledby', 'hiraku-offcanvas-btn-' + num) 68 .attr('id', id) 69 .data('breakpoint', opt.breakpoint) 70 .attr('aria-label', 'close'); 71 $('body').addClass('js-hiraku-offcanvas-body'); 72 if (opt.direction == 'right') { 73 $this.addClass('js-hiraku-offcanvas-sidebar-right'); 74 } else { 75 $this.addClass('js-hiraku-offcanvas-sidebar-left'); 76 } 77 if (opt.btn) { 78 $btn 79 .addClass('js-hiraku-offcanvas-btn') 80 .attr('data-toggle-offcanvas', '#' + id) 81 .attr('aria-expanded', false) 82 .attr('aria-label', 'Menu') 83 .attr('aria-controls', id) 84 .attr('id', 'hiraku-offcanvas-btn-' + num); 85 } 86 if (opt.fixedHeader) { 87 $fixed.addClass('js-hiraku-header-fixed'); 88 } 89 num++; 90 resizeHandler(); 91 } 92 }); 93 $(document).on('click', '.js-hiraku-offcanvas-btn', function(e) { 94 var $target = $($(this).data('toggle-offcanvas')); 95 $('<button type="button">Close Offcanvas-Menu Button</button>') 96 .attr('aria-label', 'Close') 97 .addClass('js-hiraku-offcanvas-close-btn') 98 .appendTo($target); 99 var $this = $(this); 100 var $body = $('body').css({ 'width': $(window).width(), 'height': $(window).height() }); 101 var $sidebar = $target.find('.js-hiraku-offcanvas-sidebar'); 102 var $first = $target.find(focusableElements).first(); 103 var $last = $target.find(focusableElements).last(); 104 $first.off('keydown.hiraku-offcanvas').on('keydown.hiraku-offcanvas', function(e) { 105 if ((e.which === 9 && e.shiftKey)) { 106 e.preventDefault(); 107 $last.focus(); 108 } 109 }); 110 $last.off('keydown.hiraku-offcanvas').on('keydown.hiraku-offcanvas', function(e) { 111 if ((e.which === 9 && !e.shiftKey)) { 112 e.preventDefault(); 113 $first.focus(); 114 } 115 }); 116 $last.off('click.hiraku-offcanvas').on('click.hiraku-offcanvas', function() { 117 $target.click(); 118 }); 119 $this 120 .addClass('js-hiraku-offcanvas-btn-active') 121 .attr('aria-expanded', true); 122 winPos.x = window.scrollX; 123 winPos.y = window.scrollY; 124 $target 125 .attr('aria-hidden', false) 126 .addClass('js-hiraku-offcanvas-open'); 127 setTimeout(function() { 128 $('html').css('marginTop', -1 * window.scrollY); 129 if ($sidebar.hasClass('js-hiraku-offcanvas-sidebar-right')) { 130 $body.addClass('js-hiraku-offcanvas-body-right'); 131 } else { 132 $body.addClass('js-hiraku-offcanvas-body-left'); 133 } 134 $sidebar.addClass('active'); 135 $first.focus(); 136 }, 1); 137 e.preventDefault(); 138 }); 139 $(document).on('click touchstart keyup', '.js-hiraku-offcanvas', function(e) { 140 // add the ability to close the off-canvas if the escape key is pressed 141 if (e.type === 'keyup' && e.keyCode !== 27) { 142 return; 143 } 144 145 if (e.type === 'keyup') { 146 // simulate the right element instead of passing the active element in DOM (such as triggers) 147 e.target = document.querySelector('.js-hiraku-offcanvas'); 148 } 149 150 if ($(e.target).hasClass('js-hiraku-offcanvas')) { 151 var opt = $(this).data('opt'); 152 153 $('.js-hiraku-offcanvas-body') 154 .addClass('js-hiraku-offcanvas-body-moving') 155 .removeClass('js-hiraku-offcanvas-body-right') 156 .removeClass('js-hiraku-offcanvas-body-left'); 157 $('.js-hiraku-offcanvas-sidebar').removeClass('active'); 158 $('body').css({ width: '', height: '' }); 159 setTimeout(function() { 160 $(e.target) 161 .removeClass('js-hiraku-offcanvas-open') 162 .attr('aria-hidden', true); 163 $('.js-hiraku-offcanvas-body').removeClass('js-hiraku-offcanvas-body-moving'); 164 $('html').css('marginTop', ''); 165 window.scrollTo(winPos.x, winPos.y); 166 var $btn = $('.js-hiraku-offcanvas-btn-active'); 167 $btn 168 .removeClass('js-hiraku-offcanvas-btn-active') 169 .attr('aria-expanded', false) 170 .focus(); 171 $(e.target).find('.js-hiraku-offcanvas-close-btn').remove(); 172 if (opt && opt.onClose) { 173 opt.onClose(); 174 } 175 }, 300); 176 } 177 }); 178 $(window).on('resize', function() { 179 if ('requestAnimationFrame' in window) { 180 cancelAnimationFrame(animationFrameId); 181 animationFrameId = requestAnimationFrame(resizeHandler); 182 } else { 183 resizeHandler(); 184 } 185 }); 186})); 187
試したこと
ドロワー内の一番上のロゴのリンク先（弊サイトトップページ）からもどった場合はこの現象は起きないようです。
また、同じリンクを踏んでも
現象が起きる時と起きない時があるようです。
補足情報（FW/ツールのバージョンなど）
現象はAndroid実機で確認しております。
HTML初心者です。どうぞよろしくお願いいたします。
2019年11月5日 追記）
※最初に質問をアップした際、
上手く保存できていませんでした。
大変申し訳ございません。
あなたの回答
tips
プレビュー
