スマホでグローバルナビのサブメニューを開くためにボタンを生成する

参考ページをカスタムしたのが、
http://wp.okinawahihakai.com/

サブメニューがあるとき append() で <span></span> を生成。

1001px以上のときは非表示、1000px以下で表示。

1000px以下のとき、$(“.nav li a.parent”) の要素部分を $(“.nav li a span”) に変更。
要素が変わったので、処理の部分も以下のように変更。

// 以前のコード
$(".nav li a.parent").unbind('click').bind('click', function(e) {
    // must be attached to anchor element to prevent bubbling
    e.preventDefault();
    $(this).parent("li").toggleClass("hover");
});

// 修正したコード
$(".nav li a span").unbind('click').bind('click', function(e) {
    // must be attached to anchor element to prevent bubbling
    e.preventDefault();
    $(this).css('display', 'block');// <- サブメニューを開くボタンを表示する
    $(this).parent("a").parent("li").toggleClass("hover");
});

あとはCSSでボタンのデザインをカスタム。

カスタム後のJS
view-source:http://wp.okinawahihakai.com/wp-content/themes/oh1/js/dropdown-menu.js