1

私の Web サイトにはこのナビゲーション バーがありますが、私の iPod touch ではドロップダウンしません。iPhone と iPad でも同様だと思います。 これはページの1つです

タッチ/ホバーを有効にするための簡単な修正があるかどうか疑問に思っていました。

CSS

4

3 に答える 3

4

iDevices に興味がある場合は、次のトリックを使用できます。

#nav ul {
display: none;
/* Your styles */
}
#nav > li:hover ul {
display: block;
}
/* This is important */
#nav > li > a:hover {
color: #fff; /* You can set the same color or add other style.*/
}

要素に:hoverイベントがある場合、最初のタップで iOS がレンダリング:hoverされ、2 番目のタップでクリック イベントが発生します。

それはうまくいくはずです。

PS モバイル、タッチ、デスクトップで異なる UI ロジックを作成することをお勧めします。

于 2012-07-26T13:15:50.613 に答える
3

私が遭遇した最もエレガントなソリューションは、Osvaldas Valutisによるものです。

彼の方法には、非常に小さな jQuery プラグインを使用して、ドロップダウン ul メニューを含むナビゲーション リスト項目のタッチ イベントを検出します。

たとえば、次のようにナビゲーションをマークアップできます。

<nav id="nav-primary">
    <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/about/">About</a>
            <ul>
                <li><a href="/about/index.html">Dropdown item 1</a></li>
                <li><a href="/about/page.html">Dropdown item 2</a></li>
            </ul>
        </li>
    </ul>
</nav>

次に、次のように 1 行の jQuery でプラグインを呼び出します。

$( '#nav-primary li:has(ul)' ).doubleTapToGo();

これにより、ドロップダウン メニューがないため、上記の例のホーム リンクが期待どおりに機能することが保証されます。唯一の (非常に小さな) 欠点は、ドロップダウンの最初のリンクに少し冗長性があることですが、それは問題ありません。

于 2013-09-14T07:45:04.137 に答える
3

これに関する良い記事があります - http://www.nczonline.net/blog/2012/07/05/ios-has-a-hover-problem/

タッチ スクリーン デバイスに使用できるノータッチ CSS クラスを提供するModernizrを使用するか、Javascript を使用してホバーを検出し、要素にクラスを追加することをお勧めします。

if (!("ontouchstart" in document.documentElement)) {
    document.documentElement.className += " no-touch";
}
于 2012-07-26T12:56:12.233 に答える