0

次のように構造化されたレガシーコードのメニューがいくつかあります。

<div id="show-hide-facets-button">iOS/Touch Browser Popdown Test
    <div id="show-hide-facets-dropdown">
        <ul>
        <li class="show-hide-facets-row" id="item1">Item One</li>
        <li class="show-hide-facets-row" id="item2">Item Two</li>
        </ul>
    </div>
</div>

ホバーするまでポップダウンは非表示です。

#show-hide-facets-button {
}
#show-hide-facets-dropdown {
    display: none;
}
#show-hide-facets-button:hover #show-hide-facets-dropdown {
    display: block;
}

jsfiddle はhttp://jsfiddle.net/brycenesbitt/y3kb7/にあります。

アンカーやその他のクリック可能な要素がないことに注意してください。この場合、最上位にクリック可能な要素を導入するクリーンな方法は何ですか?マウス ブラウザーのユーザーは引き続きホバーできますが、タッチ ブラウザーのユーザーはクリックを使用してメニュー項目にアクセスできますか? メニュー項目はすべて jquery でアクティブ化され、タッチ ブラウザーは正常に動作します。

4

2 に答える 2

5

はい、タッチ デバイスのドロップダウン メニューでホバー疑似クラスを希望どおりに動作させるのは少し難しい場合があります。jQuery プラグインがオプションの場合は、Superfish を検討してください。Silk 開発者ガイドには、ホバー メニューの Superfish ソリューションについて説明するページがあります。

幸運を！

于 2014-02-18T21:35:27.950 に答える