1

私のナビゲーションは、画面上部に固定された短いバーです。カーソルを合わせると展開してメニュー オプションが表示され、ロールアウトすると折りたたまれます。これはデスクトップでうまく機能します (実際には、ナビゲーションの内側をクリックして開き、外側をクリックして閉じることができる最新の Android デバイスでも)。iOS デバイスでは、ナビをタッチするとナビが開きますが、ナビの外側をタッチしても閉じません。

全面的にクリックで開閉するようにナビを書き直すこともできますが、デスクトップでは扱いにくいと感じます。ホバー時に開いたり閉じたりすると、より発見しやすく、素早く感じます。

あなたはこれに出くわしたことがありますか？モバイルで別の方法で動作させることは可能ですか? それはすべきですか？

4

2 に答える 2

1

これを解決するにはいくつかの方法があります - これが最速の (最もハックな) 方法です:

非表示の入力を作成します (または、ページを常に使用している場合は、通常の入力を使用できます)。body で「touchstart」イベントをリッスンします。ターゲットが nav 要素内にある場合は無視できます。それ以外の場合は、その入力要素に同時に焦点を合わせてぼかします。これにより、「ホバーした」ナビゲーション項目からフォーカスが削除されます。

これは私が最近使用したコードの一部です (Modernizr と jQuery を使用):

            Modernizr.touch && $('body').on('touchstart',function(e) {
                $('input',$('#search')).focus().blur();
            });
于 2013-09-17T14:54:41.073 に答える
0

@media のようなものが役立つかもしれません: http://www.w3schools.com/css/css_mediatypes.asp

于 2013-09-17T14:36:35.113 に答える