初めて質問させて貰います。至らぬ点があるかもしれませんが宜しくお願い致します。
###前提・実現したいこと
スマホで見る場合、サイドメニューがドロワーメニューになるように施行しております。
bigslide.jsという既存のjqueryプラグインを組み込みました。
ブラウザが768px以上のときにbigslide.jsが起動しないようにnavタグに"menu"というIDを外すための命令文を付け加えました。
###発生している問題・エラーメッセージ
最初のブラウザ起動時しかウィンドウサイズを判定して貰えず、ブラウザのサイズを変えることでスマホとPCの画面の切り替えができません。
###該当のソースコード
html
<!doctype html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> ・・・ <link href="assets/css/style.css" rel="stylesheet" type="text/css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="assets/js/bigSlide.js"></script> <script> $(document).ready(function() { $('.menu-link').bigSlide(); }); </script> <title>#</title> </head> <body> <div class="wrapper"> <header class="header"> <div>・・・</div> </header> <div class="contents"> <nav class="side-menu panel" role="navigation"> <!-- ここにbigslide.jsが#menuを追記してドロワーメニューに切り替えます。 --> <ul> <li class="#"><a href="#">メニュー1</a></li> <li class="#"><a href="#">メニュー2</a></li> <li class="#"><a href="#">メニュー3</a></li> <li class="#"><a href="#">メニュー4</a></li> <li class="#"><a href="#">メニュー5</a></li> </ul> </nav> ・・・
jquery
/*! bigSlide - v0.12.0 - 2016-08-01 * http://ascott1.github.io/bigSlide.js/ * Copyright (c) 2016 Adam D. Scott; Licensed MIT */ //------------------------------------------------- //・オリジナルの部分 //------------------------------------------------- $(window).resize(function(){ var w = $(window).width(); var x = 768; if (w >= x) { $('nav').attr('id', 'menu'); } else {} }); //-------------------------------------------------- //・bigslide.js //-------------------------------------------------- (function (factory) { 'use strict'; if (typeof define === 'function' && define.amd) { // AMD. Register as an anonymous module. define(['jquery'], factory); } else if (typeof exports === 'object') { // Node/CommonJS module.exports = factory(require('jquery')); } else { // Browser globals factory(jQuery); } }(function($) { 'use strict'; // where inlineCSS is the string value of an element's style attribute // and toRemove is a string of space-separated CSS properties, // _cleanInlineCSS removes the CSS declaration for each property in toRemove from inlineCSS // and returns the resulting string function _cleanInlineCSS(inlineCSS, toRemove){ var inlineCSSArray = inlineCSS.split(';'); var toRemoveArray = toRemove.split(' '); var cleaned = ''; var keep; for (var i = 0, j = inlineCSSArray.length; i < j; i++) { keep = true; for (var a = 0, b = toRemoveArray.length; a < b; a++) { if (inlineCSSArray[i] === '' || inlineCSSArray[i].indexOf(toRemoveArray[a]) !== -1) { keep = false; } } if(keep) {cleaned += inlineCSSArray[i] + '; ';} } return cleaned; } $.fn.bigSlide = function(options) { // store the menuLink in a way that is globally accessible var menuLink = this; // plugin settings var settings = $.extend({ 'menu': ('#menu'), 'push': ('.push'), 'shrink': ('.shrink'), 'hiddenThin': ('.hiddenThin'), 'side': 'left', 'menuWidth': '15.625em', 'semiOpenMenuWidth': '4em', 'speed': '300', 'state': 'closed', 'activeBtn': 'active', 'easyClose': false, 'saveState': false, 'semiOpenStatus': false, 'semiOpenScreenWidth': 480, 'beforeOpen': function () {}, 'afterOpen': function() {}, 'beforeClose': function() {}, 'afterClose': function() {} }, options); //以下オプションなどが記載されていました。文字数制限のために省略しました。
###試したこと
ネット上で調べましたが、解決策が見つかりませんでした。
###補足情報(言語/FW/ツール等のバージョンなど)
DWを仕様。最新バージョンのgoogle chromeとfirefoxで施行しております。