9

Twitter Bootstrap のドロップダウンをクリック時からホバー時に表示するように変更する方法については、多くの質問/回答があるようです。Bootstrap のビルダーには、ホバーの代わりにクリックを使用する正当な理由があります。ホバーは、ほとんどのタブレットや携帯電話では機能しません。しかし、私が Bootstrap を使用している理由の 1 つは、そのレスポンシブ機能にあります。デスクトップ、タブレット、スマートフォンで表示できる 1 つのサイトが必要です。タブレットや携帯電話ではクリックしてドロップダウンを取得する必要がありますが、デスクトップでは予期される動作ではありません。サイトの応答性を高めたいのですが、ユーザーの再トレーニングを犠牲にする必要はありません。

デスクトップ用のホバー ドロップダウンと、タブレットや携帯電話用のクリック ドロップダウンを提供する方法はありますか?

4

3 に答える 3

4

ドロップダウンがホバー時に機能するようにするプラグインを作成しました（いくつかの改良に取り組んでいますが、間違いなくそのまま機能します）が、Twitter Bootstrapのクリックイベントを妨げないため、両方を安全にバインドできます。マウスの場合、ホバーするとアクティブになりますが、マウスがない場合 (つまり、タブレットのタッチスクリーン)、クリックするとアクティブになります。

プラグインを GitHub でホストしています: https://github.com/CWSpear/twitter-bootstrap-hover-dropdown

明示的に呼び出すことで機能しますが、近い将来、データ属性を操作できるようにコードを微調整する予定です。

于 2012-10-17T15:22:27.693 に答える
2

私はまさにこれを探していました。そして、より良い解決策を見つけました（と思います）。これは、すばらしいModernizr.jsライブラリを使用して簡単に実行できます。以下の関数でタッチスクリーンデバイスを検出できます。

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

次に、場所を「#」に変更するか、親メニュー項目のデフォルト アクションを防止することにより、Javascript を介してハイパーリンクの URL を動的に無効にすることができます。最終的なコードは次のようになります。

$(document).ready(function() { 

    /* If mobile browser, prevent click on parent nav item from redirecting to URL */
    if(is_touch_device()) { 

        $('#mainmenu li > ul').each(function (index, ev) {
            /* Option 1: Use this to modify the href on the <a> to # */
            $(ev).prev('a').attr('href' ,'#');  

            /* OR Option 2: Use this to keep the href on the <a> intact but prevent the default action */
            $(ev).prev('a').click(function(event) {
                event.preventDefault();
            });
        });
    }

});

詳細については、このリンク を参照してください。誰かが私に投票してくれると信じています:-)

ありがとう

于 2015-08-13T17:46:29.417 に答える
2

「レスポンシブユーティリティクラス」でできます

ページの下部にあるhttp://twitter.github.com/bootstrap/scaffolding.html

于 2012-06-18T22:42:35.167 に答える