Twitter Bootstrap：ドロップダウンメニューデスクトップのためのホバー、タブレット/電話をクリックしますか？

Question

Twitter Bootstrapのドロップダウンをクリックして表示されてからホバーに表示されるように変更する方法については、多くの質問と回答があるようです。ブートストラップのビルダーは、ホバーの代わりにクリックを使用する正当な理由があります。ホバーはほとんどのタブレットで動作しません&携帯電話。しかし、私がBootstrapを使用している理由の1つは、その応答的な機能です。デスクトップ、タブレット、携帯電話で表示できるサイトが1つ必要です。タブレットや携帯電話の場合は、クリックするとクリックする必要がありますが、これはデスクトップの動作ではありません。私は自分のサイトが反応しやすいようにしたいと思いますが、ユーザーを訓練する必要はありません！

デスクトップのホバードロップダウンを提供し、タブレットや携帯電話のドロップダウンをクリックする方法はありますか？ドロップダウンが動作することを可能にする「応答ユーティリティクラス」

http://twitter.github.com/bootstrap/scaffolding.htmlと

Answer 1

あなたはできるページ

Answer 2

の一番下に、私は、プラグイン作成（カップルの改良に取り組んが、しかしであるとして、それは間違いなく動作します）あなたがマウスを持っていれば起動しますが、マウスがなければ（つまり、タブレットにタッチスクリーンがあれば） ）をクリックすると、それは引き続き有効になります。

私はGitHubの上にホストされているプラ​​グインを持っている：https://github.com/CWSpear/twitter-bootstrap-hover-dropdown

それが明示的に呼び出すことによって動作しますが、私は近い将来、データの属性で動作するようにコードを微調整するつもりですが。

Answer 3

私はこれを正確に探していました。そして私はより良い解決策を見つけました（私は思っています）。 私たちは簡単にModernizr.jsライブラリを使ってこれを行うことができます。 タッチスクリーンデバイスは、以下の機能で検出できます。

function is_touch_device() { 
    return !!('ontouchstart' in window); 
} 

そして、我々は、「＃」に場所を変更することにより、または親メニュー項目のデフォルトの動作を防止することにより、いずれかのJavascriptを経由して、動的ハイパーリンクにURLを無効にすることができます。 最終コードは以下の通りです。

詳細については、あなたが見ることができるthis link私は信じています 誰かが応答ユーティリティクラスを使用することにより、