【Tips】TwitterBootStrapのbootstrap.jsのドロップダウンメニューがスマホだと機能しない問題の対処方法

DSC08775

2013年06月06日(木)

こんにちは。 今回は便利なTips。かの有名なTwitterBootstrapのナビゲーションメニュー等で使用する機会があると思われるドロップダウンメニューが、タッチデバイス(スマホ等)で機能しない問題の解決方法。

僕もほぼあきらめかけていましたがひょんなことから解決できちゃいました! その備忘録に。 事の発端は、TwitterBootstrapのドロップダウンメニューを使い、レスポンシブサイトを作成している際にこの問題にぶつかりました。 問題が発生する箇所はここ。


<div class="dropdown">
<a class="header-dropdown dropdown-toggle accent-color" data-toggle="dropdown" href="#">
<span style="font-size: 13px; line-height: 19px;">        お問い合わせ</span>
<span style="font-size: 13px; line-height: 19px;">        <b class="caret"></b></span>
</a>
<ul class="dropdown-menu">
<li><a href="a.html">Aサイト</a></li>

<li><a href="b.html">Bサイト</a></li>

<li><a href="c.html">Cサイト</a></li>
<li class="divider"></li>
<li><a href="home.html">Home</a></li>
</ul>
 </div>




このコードで、TwitterBootstrapでは要素をクリックするとドロップダウンメニューがトグルで表示されるようになっています。  

が、  

PCでは正常通りの動作を確認できたのですが、 スマホサイトの方では、タッチするとトグルが閉じてしまい、要素のリンクをタッチできない現状が起きたのです。  

これはもう、詰んだな。。。。 と思い、半ばあきらめて作業を後回しにしていたのですが、 本日解決できました!!!  

参照したサイトは以下、

http://mawatari.jp/archives/twitter-bootstrap-dropdown-menu-not-clickable-on-touch-devices

mawatari.jp様、マジでありがとうございました。


  解決方法は、 bootstrap.jsもしくはbootstrap.min.jsファイルの該当箇所1行を追加するのみ!!!


$(document)
.on('click.dropdown.data-api touchstart.dropdown.data-api', clearMenus)
.on('click.dropdown touchstart.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() })
.on('click.dropdown.data-api touchstart.dropdown.data-api' , toggle, Dropdown.prototype.toggle)
.on('keydown.dropdown.data-api touchstart.dropdown.data-api', toggle + ', [role=menu]' , Dropdown.prototype.keydown)

// ここに以下のスクリプトを追記

.on('touchstart.dropdown.data-api', '.dropdown-menu', function (e) { e.stopPropagation() })

// 追記終了

}(window.jQuery);/* =========================================================



  たったこれだけ。   まさかとは思いスマホをチェックすると、 あれまぁ、見事に解決していました!!!!   本当にたすかりました!!!


mawatari.jp
様、マジでありがとうございました。(2回目)



これを機に、直せない問題はないんだと、日々精進していく所存でございます。  


ありがとう、No Thanks!!!    

スポンサードリンク

運営サービスPR

関連記事

他の記事はありません。

スポンサードリンク

運営サービスPR