ドロワーメニューのカスタマイズ

いつもお世話になっております。

表題の件ですが、
下記URLにてwordpressのテーマを製作しております。
ドロワーメニューにプラグイン「Drawer」を利用しており、wordpressのカスタムメニューとして、表示しています。

【実現したい事】
・<ul class="drawer-menu">を指定してiScrollのスクロール用のstyleを入れたい。

drawerではメニューの数が多くなるとiScrollによって、ドロワーメニュー内がスクロールできるようになっています。
その際のstyleが<nav class="drawer-nav" role="navigation">直下に初めに記載されているタグに挿入されるようになっているようです。

iScrollによって挿入されるstyleタグ

html
1style="transition-timing-function: cubic-bezier(0.1, 0.57, 0.1, 1); transition-duration: 0ms; transform: translate(0px, 0px) translateZ(0px);"

html
1<body class="drawer drawer--left">
2  <header role="banner">
3    <button type="button" class="drawer-toggle drawer-hamburger">
4      <span class="sr-only">toggle navigation</span>
5      <span class="drawer-hamburger-icon"></span>
6    </button>
7    <nav class="drawer-nav" role="navigation">
8      <ul class="drawer-menu">
9        <li><a class="drawer-brand" href="#">Brand</a></li>
10        <li><a class="drawer-menu-item" href="#">Nav1</a></li>
11        <li><a class="drawer-menu-item" href="#">Nav2</a></li>
12      </ul>
13    </nav>
14  </header>

上記の場合は<ul class="drawer-menu">にスクロール用のstyleが挿入され、正常に動作しますが、

html
1<body class="drawer drawer--left">
2  <header role="banner">
3    <button type="button" class="drawer-toggle drawer-hamburger">
4      <span class="sr-only">toggle navigation</span>
5      <span class="drawer-hamburger-icon"></span>
6    </button>
7    <nav class="drawer-nav" role="navigation">
8　　　<h2 class="drawer-brand">Brand</h2>
9      <ul class="drawer-menu">
10        <li><a class="drawer-menu-item" href="#">Nav1</a></li>
11        <li><a class="drawer-menu-item" href="#">Nav2</a></li>
12      </ul>
13    </nav>
14  </header>

このような場合は<ul class="drawer-menu">にstyleがつかずに、

<nav>の直下にある<h2 class="drawer-brand">Brand</h2>にstyleが挿入されてしまいます。

iScrollはの利用方法は

javascript
1var myScroll = new IScroll('#wrapper', {
2    mouseWheel: true,
3    scrollbars: true
4});

上記のようにidを指定することはできるのですが、
drawerでは上記のクラスの指定している場所がわかりません。

javascript
1/*!
2 * jquery-drawer v3.2.2
3 * Flexible drawer menu using jQuery, iScroll and CSS.
4 * http://git.blivesta.com/drawer
5 * License : MIT
6 * Author : blivesta <design@blivesta.com> (http://blivesta.com/)
7 */
8
9;(function umd(factory) {
10    'use strict';
11    if (typeof define === 'function' && define.amd) {
12        define(['jquery'], factory);
13    } else if (typeof exports === 'object') {
14        module.exports = factory(require('jquery'));
15    } else {
16        factory(jQuery);
17    }
18}(function Drawer($) {
19    'use strict';
20    var namespace = 'drawer';
21    var touches = typeof document.ontouchstart != 'undefined';
22    var __ = {
23        init: function init(options) {
24            options = $.extend({
25                iscroll: {
26                    mouseWheel: true,
27                    scrollbars: true,
28                    preventDefault: false
29                },
30                showOverlay: true
31            }, options);
32
33            __.settings = {
34                state: false,
35                events: {
36                    opened: 'drawer.opened',
37                    closed: 'drawer.closed'
38                },
39                dropdownEvents: {
40                    opened: 'shown.bs.dropdown',
41                    closed: 'hidden.bs.dropdown'
42                }
43            };
44
45            __.settings.class = $.extend({
46                nav: 'drawer-nav',
47                toggle: 'drawer-toggle',
48                overlay: 'drawer-overlay',
49                open: 'drawer-open',
50                close: 'drawer-close',
51                dropdown: 'drawer-dropdown'
52            }, options.class);
53
54            return this.each(function instantiateDrawer() {
55                var _this = this;
56                var $this = $(this);
57                var data = $this.data(namespace);
58
59                if (!data) {
60                    options = $.extend({}, options);
61                    $this.data(namespace, { options: options });
62
63                    __.refresh.call(_this);
64
65                    if (options.showOverlay) {
66                        __.addOverlay.call(_this);
67                    }
68
69                    $('.' + __.settings.class.toggle).on('click.' + namespace, function toggle() {
70                        __.toggle.call(_this);
71                        return _this.iScroll.refresh();
72                    });
73
74                    $(window).on('resize.' + namespace, function close() {
75                        __.close.call(_this);
76                        return _this.iScroll.refresh();
77                    });
78
79                    $('.' + __.settings.class.dropdown)
80                        .on(__.settings.dropdownEvents.opened + ' ' + __.settings.dropdownEvents.closed, function onOpenedOrClosed() {
81                        return _this.iScroll.refresh();
82                    });
83                }
84
85            }); // end each
86        },
87
88        refresh: function refresh() {
89            this.iScroll = new IScroll(
90                '.' + __.settings.class.nav,
91                $(this).data(namespace).options.iscroll
92            );
93        },
94
95        addOverlay: function addOverlay() {
96            var $this = $(this);
97            var $overlay = $('<div>').addClass(__.settings.class.overlay + ' ' + __.settings.class.toggle);
98
99            return $this.append($overlay);
100        },
101
102        toggle: function toggle() {
103            var _this = this;
104
105            if (__.settings.state) {
106                return __.close.call(_this);
107            } else {
108                return __.open.call(_this);
109            }
110        },
111
112        open: function open() {
113            var $this = $(this);
114
115            if (touches) {
116                $this.on('touchmove.' + namespace, function disableTouch(event) {
117                    event.preventDefault();
118                });
119            }
120
121            return $this
122                .removeClass(__.settings.class.close)
123                .addClass(__.settings.class.open)
124                .drawerCallback(function triggerOpenedListeners() {
125                __.settings.state = true;
126                $this.trigger(__.settings.events.opened);
127            });
128        },
129
130        close: function close() {
131            var $this = $(this);
132
133            if (touches) $this.off('touchmove.' + namespace);
134
135            return $this
136                .removeClass(__.settings.class.open)
137                .addClass(__.settings.class.close)
138                .drawerCallback(function triggerClosedListeners() {
139                __.settings.state = false;
140                $this.trigger(__.settings.events.closed);
141            });
142        },
143
144        destroy: function destroy() {
145            return this.each(function destroyEach() {
146                var _this = this;
147                var $this = $(this);
148                $('.' + __.settings.class.toggle).off('click.' + namespace);
149                $(window).off('resize.' + namespace);
150                $('.' + __.settings.class.dropdown).off(__.settings.dropdownEvents.opened + ' ' + __.settings.dropdownEvents.closed);
151                _this.iScroll.destroy();
152                $this
153                    .removeData(namespace)
154                    .find('.' + __.settings.class.overlay)
155                    .remove();
156            });
157        }
158
159    };
160
161    $.fn.drawerCallback = function drawerCallback(callback) {
162        var end = 'transitionend webkitTransitionEnd';
163        return this.each(function setAnimationEndHandler() {
164            var $this = $(this);
165            $this.on(end, function invokeCallbackOnAnimationEnd() {
166                $this.off(end);
167                return callback.call(this);
168            });
169        });
170    };
171
172    $.fn.drawer = function drawer(method) {
173        if (__[method]) {
174            return __[method].apply(this, Array.prototype.slice.call(arguments, 1));
175        } else if (typeof method === 'object' || !method) {
176            return __.init.apply(this, arguments);
177        } else {
178            $.error('Method ' + method + ' does not exist on jQuery.' + namespace);
179        }
180    };
181
182}));

どのように編集または追記をすれば、任意のIDにiScrollのstyleをつけることができるのでしょうか？

ご教授お願いできないでしょうか。
宜しくお願い致します。

行動規範の内容に同意します

回答1件

自己解決

javascript
1console.log(hoge);

上記にて、変数の中身を確認。
下記コードを

javascript
1refresh: function refresh() {
2            this.iScroll = new IScroll(
3                '.' + __.settings.class.nav,
4                $(this).data(namespace).options.iscroll
5            );
6        }

javascript
1refresh: function refresh() {
2            this.iScroll = new IScroll(
3                '.test',
4                $(this).data(namespace).options.iscroll
5            );
6        }